#titleBg .character:before {
  content: "";
  position: absolute;
  background: none; }

.section-chara {
  position: relative;
  z-index: 50;
  height: 800px; }
  .section-chara .profile {
    margin-top: 20px;
    margin-left: 80px; }
    .section-chara .profile .title-pro {
      font-size: 16px;
      line-height: 30px;
      color: #77725a; }
    .section-chara .profile .text {
      font-size: 14px;
      line-height: 30px; }
  .section-chara .charaBg.charaBgTop {
    background: url("../../public/img/chara/bg01.png") no-repeat;
    background-size: cover;
    padding: 10px 0 30px 0;
    margin-top: 70px; }
  .section-chara .charaBg.charaBgbottom {
    background: url("../../public/img/chara/bg02.png") no-repeat;
    background-size: cover;
    padding: 10px 0 30px 0;
    margin-top: 70px; }
  .section-chara .btn {
    position: relative;
    top: 0;
    left: 0; }
    .section-chara .btn .name {
      margin-left: 40px; }
      .section-chara .btn .name p:nth-of-type(2) {
        margin-top: 10px; }

.btns .prev {
  left: 0;
  transform: translateX(-100px); }

.btns .next {
  right: 0;
  transform: translateX(100px); }

.btns .next, .btns .prev {
  content: "";
  position: absolute;
  z-index: 10;
  top: 50%;
  margin-top: -21.5px; }

.position {
  position: relative; }

.kurodo:before {
  content: "";
  position: absolute;
  top: -180px;
  right: 0;
  width: 598px;
  height: 957px;
  background: url("../../public/img/chara/pro/img-chara01.png") no-repeat; }

.reili:before {
  content: "";
  position: absolute;
  top: -110px;
  right: -10px;
  width: 488px;
  height: 807px;
  background: url("../../public/img/chara/pro/img-chara02.png") no-repeat; }

.razu:before {
  content: "";
  position: absolute;
  top: -242px;
  right: 80px;
  width: 515px;
  height: 957px;
  background: url("../../public/img/chara/pro/img-chara03.png") no-repeat; }

.kai:before {
  content: "";
  position: absolute;
  top: -142px;
  right: 20px;
  width: 428px;
  height: 867px;
  background: url("../../public/img/chara/pro/img-chara04.png") no-repeat; }

.mineruba:before {
  content: "";
  position: absolute;
  top: -65px;
  right: 100px;
  width: 294px;
  height: 784px;
  background: url("../../public/img/chara/pro/img-chara11.png") no-repeat; }

.karen:before {
  content: "";
  position: absolute;
  top: -65px;
  right: 100px;
  width: 339px;
  height: 765px;
  background: url("../../public/img/chara/pro/img-chara12.png") no-repeat; }

.ragunarokku .name p:first-of-type {
  padding: 20px 0; }

.mairuzu:before {
  content: "";
  position: absolute;
  top: -55px;
  right: 50px;
  width: 301px;
  height: 773px;
  background: url("../../public/img/chara/pro/img-chara15.png") no-repeat; }

.dan:before {
  content: "";
  position: absolute;
  top: -166px;
  right: 30px;
  width: 389px;
  height: 900px;
  background: url("../../public/img/chara/pro/img-chara16.png") no-repeat; }

.ronarudo:before {
  content: "";
  position: absolute;
  top: -52px;
  right: 60px;
  width: 291px;
  height: 774px;
  background: url("../../public/img/chara/pro/img-chara17.png") no-repeat; }

.ro-gann:before {
  content: "";
  position: absolute;
  top: -52px;
  right: 60px;
  width: 313px;
  height: 781px;
  background: url("../../public/img/chara/pro/img-chara18.png") no-repeat; }

.buraiann:before {
  content: "";
  position: absolute;
  top: -52px;
  right: 60px;
  width: 335px;
  height: 794px;
  background: url("../../public/img/chara/pro/img-chara19.png") no-repeat; }

.mari:before {
  content: "";
  position: absolute;
  top: -52px;
  right: 140px;
  width: 298px;
  height: 747px;
  background: url("../../public/img/chara/pro/img-chara20.png") no-repeat; }

.ruhu:before {
  content: "";
  position: absolute;
  top: -52px;
  right: 140px;
  width: 222px;
  height: 760px;
  background: url("../../public/img/chara/pro/img-chara21.png") no-repeat; }

.ragunarokku:before {
  content: "";
  position: absolute;
  top: 65px;
  right: 100px;
  width: 322px;
  height: 424px;
  background: url("../../public/img/chara/pro/img-chara13.png") no-repeat; }

.annjurika:before {
  content: "";
  position: absolute;
  top: 15px;
  right: 40px;
  width: 431px;
  height: 577px;
  background: url("../../public/img/chara/pro/img-chara14.png") no-repeat; }

.karen:before {
  content: "";
  position: absolute;
  top: -65px;
  right: 100px;
  width: 339px;
  height: 765px;
  background: url("../../public/img/chara/pro/img-chara12.png") no-repeat; }

.andore:before {
  content: "";
  position: absolute;
  top: -65px;
  right: 50px;
  width: 501px;
  height: 811px;
  background: url("../../public/img/chara/pro/img-chara22.png") no-repeat; }

.serujio:before {
  content: "";
  position: absolute;
  top: -65px;
  right: 50px;
  width: 378px;
  height: 799px;
  background: url("../../public/img/chara/pro/img-chara23.png") no-repeat; }

#kuraimaria .btnlink {
  display: block;
  width: 502px;
  height: 50px;
  background: url("../../public/img/chara/btn-link.png") no-repeat;
  margin-top: 40px; }

.kuraimaria:before {
  content: "";
  position: absolute;
  top: -125px;
  right: -280px;
  width: 838px;
  height: 867px;
  background: url("../../public/img/chara/pro/img-chara05.png") no-repeat;
  z-index: 1; }

.kurausu:before {
  content: "";
  position: absolute;
  top: -162px;
  right: -73px;
  width: 618px;
  height: 887px;
  background: url("../../public/img/chara/pro/img-chara06.png") no-repeat;
  z-index: 1; }

.foruse:before {
  content: "";
  position: absolute;
  top: -112px;
  right: 57px;
  width: 385px;
  height: 809px;
  background: url("../../public/img/chara/pro/img-chara07.png") no-repeat; }

.beruga:before {
  content: "";
  position: absolute;
  top: -99px;
  right: -53px;
  width: 531px;
  height: 808px;
  background: url("../../public/img/chara/pro/img-chara08.png") no-repeat; }

.nikora:before {
  content: "";
  position: absolute;
  top: -79px;
  right: 77px;
  width: 307px;
  height: 763px;
  background: url("../../public/img/chara/pro/img-chara09.png") no-repeat; }

.kiara:before {
  content: "";
  position: absolute;
  top: -69px;
  right: -123px;
  width: 535px;
  height: 809px;
  background: url("../../public/img/chara/pro/img-chara10.png") no-repeat; }

.section-banner {
  margin: 140px 0; }
  .section-banner .section-inner .chara {
    display: inline-block;
    vertical-align: bottom;
    float: none;
    margin-top: 0;
    margin-right: 0; }
  .section-banner .section-inner .chara:nth-of-type(1n + 9) {
    margin-top: 30px; }
  .section-banner .section-inner p:nth-of-type(1n+3) {
    margin-top: 0; }
  .section-banner .section-inner .new {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block; }
  .section-banner .section-inner .new:before {
    content: "";
    position: absolute;
    bottom: 50px;
    left: 20px;
    width: 62px;
    height: 23px;
    background: url("../../public/img/chara/icon-new.png") no-repeat; }
  .section-banner .section-inner .title {
    float: none;
    text-align: center;
    margin-right: 0; }
  .section-banner .section-inner p.title02 {
    margin: 70px 0 10px 0; }
  .section-banner .section-inner p.chara.adjust {
    margin-top: 0; }

.charaArea {
  display: none; }

.chara {
  position: relative;
  top: 0;
  left: 0; }

.open:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 246px;
  height: 246px;
  z-index: 1; }

@media screen and (max-width: 1280px) {
  .section-chara {
    position: relative;
    z-index: 50;
    height: auto; }
    .section-chara .section-inner {
      width: 100%;
      margin: 0 auto; }
    .section-chara .profile {
      margin-top: 2%;
      margin-left: 12.3%; }
      .section-chara .profile .title-pro {
        font-size: 1.4vw;
        line-height: 2vw; }
      .section-chara .profile .text {
        font-size: 1.1vw;
        line-height: 2.4vw; }
    .section-chara .charaBg.charaBgTop {
      width: 100%;
      height: auto;
      background: url("../../public/img/chara/bg01.png") no-repeat;
      background-size: 100%;
      padding: 1% 0 3% 0;
      margin-top: 7%; }
    .section-chara .charaBg.charaBgbottom {
      width: 100%;
      height: auto;
      background: url("../../public/img/chara/bg02.png") no-repeat;
      background-size: 100%;
      padding: 1% 0 3% 0;
      margin-top: 7%; }
    .section-chara .btn {
      position: relative;
      top: 0;
      left: 0; }
      .section-chara .btn .name {
        margin-left: 13%;
        width: 45%; }
        .section-chara .btn .name p:first-of-type {
          width: 68%; }
        .section-chara .btn .name p:last-of-type {
          width: 70%; }
        .section-chara .btn .name img {
          max-width: 100%; }

  .btns .prev {
    left: 0;
    transform: translateX(0); }

  .btns .next {
    right: 0;
    transform: translateX(0); }

  .btns .next, .btns .prev {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    margin-top: -21.5px; }

  .position {
    position: relative; }

  .kurodo:before {
    content: "";
    position: absolute;
    top: -61%;
    right: 11%;
    width: 46%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara01.png") no-repeat;
    background-size: 100%;
    padding-top: 71%; }

  .section-chara .kurodo .btn .name p:first-of-type {
    width: 50%;
    width: 331px;
    width: 25.859375vw; }

  .reili:before {
    content: "";
    position: absolute;
    top: -40%;
    right: 11%;
    width: 40%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara02.png") no-repeat;
    background-size: 100%;
    padding-top: 71%; }

  .section-chara .reili .btn .name p:first-of-type {
    width: 60%;
    width: 274px;
    width: 21.40625vw; }

  .razu:before {
    content: "";
    position: absolute;
    top: -74%;
    right: 9%;
    width: 48%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara03.png") no-repeat;
    background-size: 100%;
    padding-top: 78%; }

  .section-chara .razu .btn .name p:first-of-type {
    width: 30%;
    width: 229px;
    width: 17.890625vw; }

  .kai:before {
    content: "";
    position: absolute;
    top: -47%;
    right: 10%;
    width: 33%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara04.png") no-repeat;
    background-size: 100%;
    padding-top: 67%; }

  .section-chara .kai .btn .name p:first-of-type {
    width: 55%;
    width: 253px;
    width: 19.765625vw; }

  .mineruba:before {
    content: "";
    position: absolute;
    top: -10%;
    right: 29%;
    top: -65px;
    top: -5.078125vw;
    right: 200px;
    right: 15.625vw;
    width: 294px;
    width: 22.96875vw;
    height: 784px;
    height: 61.25vw;
    background: url("../../public/img/chara/pro/img-chara11.png") no-repeat;
    background-size: 100%; }

  .section-chara .mineruba .btn .name p:first-of-type {
    width: 55%;
    width: 321px;
    width: 25.078125vw; }

  .karen:before {
    content: "";
    position: absolute;
    top: -10%;
    right: 29%;
    width: 46%;
    height: 0;
    top: -65px;
    top: -5.078125vw;
    right: 200px;
    right: 15.625vw;
    width: 339px;
    width: 26.484375vw;
    height: 765px;
    height: 59.765625vw;
    background: url("../../public/img/chara/pro/img-chara12.png") no-repeat;
    background-size: 100%;
    padding-top: 104%; }

  .section-chara .ragunarokku .btn .name p:first-of-type {
    padding: 2% 0;
    width: 54%;
    width: 261px;
    width: 20.390625vw; }

  .ragunarokku:before {
    content: "";
    position: absolute;
    top: 65px;
    top: 5.078125vw;
    right: 200px;
    right: 15.625vw;
    width: 322px;
    width: 25.15625vw;
    height: 424px;
    height: 33.125vw;
    background: url("../../public/img/chara/pro/img-chara13.png") no-repeat;
    background-size: 100%;
    padding-top: 69%; }

  .annjurika:before {
    content: "";
    position: absolute;
    top: 15px;
    top: 1.171875vw;
    right: 150px;
    right: 11.71875vw;
    width: 431px;
    width: 33.671875vw;
    height: 577px;
    height: 45.078125vw;
    background: url("../../public/img/chara/pro/img-chara14.png") no-repeat;
    background-size: 100%;
    padding-top: 103%; }

  .section-chara .annjurika .btn .name p:first-of-type {
    width: 79%;
    width: 361px;
    width: 28.203125vw; }

  .kuraimaria:before {
    content: "";
    position: absolute;
    top: -39%;
    right: -13%;
    width: 66%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara05.png") no-repeat;
    z-index: 1;
    background-size: 100%;
    padding-top: 74%; }

  .section-chara .kuraimaria .btn .name p:first-of-type {
    width: 60%;
    width: 0px;
    width: 0vw; }

  .kurausu:before {
    content: "";
    position: absolute;
    top: -58%;
    right: 5%;
    width: 50%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara06.png") no-repeat;
    z-index: 1;
    background-size: 100%;
    padding-top: 74%; }

  .section-chara .kurausu .btn .name p:first-of-type {
    width: 50%;
    width: 0px;
    width: 0vw; }

  .foruse:before {
    content: "";
    position: absolute;
    top: -40%;
    right: 15%;
    width: 32%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara07.png") no-repeat;
    background-size: 100%;
    padding-top: 69%; }

  .section-chara .foruse .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .beruga:before {
    content: "";
    position: absolute;
    top: -32%;
    right: 7%;
    width: 40%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara08.png") no-repeat;
    background-size: 100%;
    padding-top: 61%; }

  .section-chara .beruga .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .nikora:before {
    content: "";
    position: absolute;
    top: -32%;
    right: 21%;
    width: 21%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara09.png") no-repeat;
    background-size: 100%;
    padding-top: 58%; }

  .section-chara .nikora .btn .name p:first-of-type {
    width: 50%;
    width: 0px;
    width: 0vw; }

  .mairuzu:before {
    content: "";
    position: absolute;
    top: -55px;
    top: -4.296875vw;
    right: 200px;
    right: 15.625vw;
    width: 301px;
    width: 23.515625vw;
    height: 773px;
    height: 60.390625vw;
    background: url("../../public/img/chara/pro/img-chara15.png") no-repeat;
    background-size: 100%; }

  .section-chara .mairuzu .btn .name p:first-of-type {
    width: 35%;
    width: 280px;
    width: 21.875vw; }

  .dan:before {
    content: "";
    position: absolute;
    top: -166px;
    top: -12.96875vw;
    right: 200px;
    right: 15.625vw;
    width: 389px;
    width: 30.390625vw;
    height: 900px;
    height: 70.3125vw;
    background: url("../../public/img/chara/pro/img-chara16.png") no-repeat;
    background-size: 100%; }

  .section-chara .dan .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .ronarudo:before {
    content: "";
    position: absolute;
    top: -52px;
    top: -4.0625vw;
    right: 200px;
    right: 15.625vw;
    width: 291px;
    width: 22.734375vw;
    height: 781px;
    height: 61.015625vw;
    background: url("../../public/img/chara/pro/img-chara17.png") no-repeat;
    background-size: 100%; }

  .section-chara .ronarudo .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .ro-gann:before {
    content: "";
    position: absolute;
    top: -52px;
    top: -4.0625vw;
    right: 200px;
    right: 15.625vw;
    width: 313px;
    width: 24.453125vw;
    height: 781px;
    height: 61.015625vw;
    background: url("../../public/img/chara/pro/img-chara18.png") no-repeat;
    background-size: 100%; }

  .section-chara .ro-gann .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .buraiann:before {
    content: "";
    position: absolute;
    top: -52px;
    top: -4.0625vw;
    right: 150px;
    right: 11.71875vw;
    width: 335px;
    width: 26.171875vw;
    height: 791px;
    height: 61.796875vw;
    background: url("../../public/img/chara/pro/img-chara19.png") no-repeat;
    background-size: 100%; }

  .section-chara .buraiann .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .mari:before {
    content: "";
    position: absolute;
    top: -52px;
    top: -4.0625vw;
    right: 250px;
    right: 19.53125vw;
    width: 298px;
    width: 23.28125vw;
    height: 747px;
    height: 58.359375vw;
    background: url("../../public/img/chara/pro/img-chara20.png") no-repeat;
    background-size: 100%; }

  .section-chara .mari .btn .name p:first-of-type {
    width: 50%; }

  .ruhu:before {
    content: "";
    position: absolute;
    top: -52px;
    top: -4.0625vw;
    right: 250px;
    right: 19.53125vw;
    width: 222px;
    width: 17.34375vw;
    height: 760px;
    height: 59.375vw;
    background: url("../../public/img/chara/pro/img-chara21.png") no-repeat;
    background-size: 100%; }

  .section-chara .ruhu .btn .name p:first-of-type {
    width: 26%; }

  .andore:before {
    content: "";
    position: absolute;
    top: -100px;
    top: -7.8125vw;
    right: 150px;
    right: 11.71875vw;
    width: 501px;
    width: 39.140625vw;
    height: 811px;
    height: 63.359375vw;
    background: url("../../public/img/chara/pro/img-chara22.png") no-repeat;
    background-size: 100%; }

  .section-chara .andore .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  .serujio:before {
    content: "";
    position: absolute;
    top: -100px;
    top: -7.8125vw;
    right: 150px;
    right: 11.71875vw;
    width: 378px;
    width: 29.53125vw;
    height: 799px;
    height: 62.421875vw;
    background: url("../../public/img/chara/pro/img-chara23.png") no-repeat;
    background-size: 100%; }

  .section-chara .serujio .btn .name p:first-of-type {
    width: 35%;
    width: 0px;
    width: 0vw; }

  #kuraimaria .btnlink {
    display: block;
    width: 44%;
    height: 0;
    background: url("../../public/img/chara/btn-link.png") no-repeat;
    margin-top: 2vw;
    padding-top: 6%;
    background-size: 100%; }

  .kuraimaria:before {
    content: "";
    position: absolute;
    top: -39%;
    right: -13%;
    width: 66%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara05.png") no-repeat;
    z-index: 1;
    background-size: 100%;
    padding-top: 74%; }

  .section-chara .kuraimaria .btn .name p:first-of-type {
    width: 80%; }

  .kurausu:before {
    content: "";
    position: absolute;
    top: -58%;
    right: 5%;
    width: 50%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara06.png") no-repeat;
    z-index: 1;
    background-size: 100%;
    padding-top: 74%; }

  .foruse:before {
    content: "";
    position: absolute;
    top: -40%;
    right: 15%;
    width: 32%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara07.png") no-repeat;
    background-size: 100%;
    padding-top: 69%; }

  .section-chara .foruse .btn .name p:first-of-type {
    width: 35%; }

  .beruga:before {
    content: "";
    position: absolute;
    top: -32%;
    right: 7%;
    width: 40%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara08.png") no-repeat;
    background-size: 100%;
    padding-top: 61%; }

  .section-chara .beruga .btn .name p:first-of-type {
    width: 35%; }

  .kiara:before {
    content: "";
    position: absolute;
    top: -32%;
    right: 21%;
    width: 23%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara10.png") no-repeat;
    background-size: 100%;
    padding-top: 58%; }

  .section-chara .kiara .btn .name p:first-of-type {
    width: 50%; }

  .section-banner {
    margin: 25vw 0 4vw 0; } }
@media screen and (max-width: 1024px) {
  .font0 {
    font-size: 0; }

  .section-inner {
    width: 100%; }

  .header-bg {
    width: 100%;
    height: 0;
    background: none;
    position: relative;
    z-index: 10;
    background-size: 100%;
    padding-top: 2%;
    padding-bottom: 0;
    z-index: 100; }

  .section-chara {
    position: relative;
    z-index: 50;
    height: auto; }
    .section-chara .section-inner {
      width: 100%;
      margin: 0 auto; }
    .section-chara .profile {
      margin-top: 2%;
      margin-left: 4%;
      margin-bottom: 5%;
      position: relative;
      top: 50%;
      left: 0;
      z-index: 10;
      padding-top: 0;
      height: auto; }
      .section-chara .profile .title-pro {
        font-size: 3vw;
        line-height: 3vw;
        margin-bottom: 2%; }
      .section-chara .profile .text {
        font-size: 2.1vw;
        line-height: 4.4vw; }
    .section-chara .charaBg {
      position: relative;
      top: 0;
      left: 0; }
    .section-chara .charaBg.charaBgTop {
      min-height: 170vw;
      background: none; }
    .section-chara .charaBg.charaBgbottom {
      min-height: 170vw;
      background: none; }
    .section-chara .charaBg.charaBgTop:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      background: url("../../public/img/chara/bg01_sp.png") no-repeat;
      background-size: 100%;
      padding-top: 165%;
      margin-top: 7%; }
    .section-chara .charaBg.charaBgbottom:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      background: url("../../public/img/chara/bg02_sp.png") no-repeat;
      background-size: 100%;
      padding-top: 165%;
      margin-top: 7%; }
    .section-chara .btn {
      position: relative;
      top: 0;
      left: 0;
      padding-top: 106%;
      z-index: 50; }
      .section-chara .btn .name {
        margin: 0 auto;
        width: 71%; }
        .section-chara .btn .name p:first-of-type {
          width: 68%; }
        .section-chara .btn .name p:last-of-type {
          width: 100%;
          padding-top: 5%; }
        .section-chara .btn .name p:nth-of-type(2) {
          margin-top: 0; }
        .section-chara .btn .name img {
          width: 100%; }

  .btns .prev {
    left: 0;
    transform: translateX(0); }

  .btns .next {
    right: 0;
    transform: translateX(0); }

  .btns .next, .btns .prev {
    position: absolute;
    z-index: 10;
    top: 30.8%;
    margin-top: 0;
    width: 10%; }

  .position {
    position: relative; }

  .kurodo:before {
    content: "";
    position: absolute;
    top: -11.5%;
    right: 14%;
    width: 80%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara01.png") no-repeat center center;
    background-size: 100%;
    padding-top: 117%; }

  .section-chara .kurodo .btn .name p:first-of-type {
    width: 331px;
    width: 51.71875vw; }

  .reili:before {
    content: "";
    position: absolute;
    top: -6.5%;
    right: 14%;
    width: 66%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara02.png") no-repeat;
    background-size: 100%;
    padding-top: 110%; }

  .section-chara .reili .btn .name p:first-of-type {
    width: 60%;
    width: 274px;
    width: 42.8125vw; }

  .razu:before {
    content: "";
    position: absolute;
    top: -14%;
    right: 14%;
    width: 77%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara03.png") no-repeat;
    background-size: 100%;
    background-size: 100%;
    padding-top: 123%; }

  .section-chara .razu .btn .name p:first-of-type {
    width: 30%;
    width: 229px;
    width: 35.78125vw; }

  .kai:before {
    content: "";
    position: absolute;
    top: -9%;
    right: 14%;
    width: 56%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara04.png") no-repeat;
    background-size: 100%;
    padding-top: 114%; }

  .section-chara .kai .btn .name p:first-of-type {
    width: 55%;
    width: 253px;
    width: 39.53125vw; }

  .mineruba:before {
    content: "";
    position: absolute;
    top: -3%;
    right: 29%;
    width: 40%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara11.png") no-repeat;
    background-size: 100%;
    padding-top: 104%; }

  .section-chara .mineruba .btn .name p:first-of-type {
    width: 321px;
    width: 50.15625vw; }

  .karen:before {
    content: "";
    position: absolute;
    top: -3%;
    right: 29%;
    width: 46%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara12.png") no-repeat;
    background-size: 100%;
    padding-top: 104%; }

  .section-chara .karen .btn .name p:first-of-type {
    width: 336px;
    width: 52.5vw; }

  .section-chara .ragunarokku .btn .name p:first-of-type {
    padding: 2% 0;
    width: 54%;
    width: 261px;
    width: 40.78125vw; }

  .ragunarokku:before {
    content: "";
    position: absolute;
    top: 15%;
    right: 25%;
    width: 50%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara13.png") no-repeat;
    background-size: 100%;
    padding-top: 69%; }

  .annjurika:before {
    content: "";
    position: absolute;
    top: 7%;
    right: 17%;
    width: 67%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara14.png") no-repeat;
    background-size: 100%;
    padding-top: 103%; }

  .section-chara .annjurika .btn .name p:first-of-type {
    width: 79%;
    width: 361px;
    width: 56.40625vw; }

  .mairuzu:before {
    content: "";
    position: absolute;
    top: -55px;
    top: -4.296875vw;
    right: 28vw;
    width: 41vw;
    height: 106vw;
    background: url("../../public/img/chara/pro/img-chara15.png") no-repeat;
    background-size: 100%; }

  .section-chara .mairuzu .btn .name p:first-of-type {
    width: 68%;
    width: 280px;
    width: 43.75vw; }

  .dan:before {
    content: "";
    position: absolute;
    top: -23vw;
    right: 25vw;
    width: 53vw;
    height: 124vw;
    background: url("../../public/img/chara/pro/img-chara16.png") no-repeat;
    background-size: 100%; }

  .section-chara .dan .btn .name p:first-of-type {
    width: 61%;
    width: 237px;
    width: 37.03125vw; }

  .ronarudo:before {
    content: "";
    position: absolute;
    top: -6vw;
    right: 28vw;
    width: 41vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara17.png") no-repeat;
    background-size: 100%; }

  .section-chara .ronarudo .btn .name p:first-of-type {
    width: 77%;
    width: 278px;
    width: 43.4375vw; }

  .ro-gann:before {
    content: "";
    position: absolute;
    top: -7vw;
    right: 24vw;
    width: 44vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara18.png") no-repeat;
    background-size: 100%; }

  .section-chara .ro-gann .btn .name p:first-of-type {
    width: 76%;
    width: 285px;
    width: 44.53125vw; }

  .buraiann:before {
    content: "";
    position: absolute;
    top: -7vw;
    right: 20vw;
    width: 46vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara19.png") no-repeat;
    background-size: 100%; }

  .section-chara .buraiann .btn .name p:first-of-type {
    width: 70%;
    width: 323px;
    width: 50.46875vw; }

  .mari:before {
    content: "";
    position: absolute;
    top: -7vw;
    right: 29vw;
    width: 44vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara20.png") no-repeat;
    background-size: 100%; }

  .section-chara .mari .btn .name p:first-of-type {
    width: 59%;
    width: 239px;
    width: 37.34375vw; }

  .ruhu:before {
    content: "";
    position: absolute;
    top: -7vw;
    right: 29vw;
    width: 32vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara21.png") no-repeat;
    background-size: 100%; }

  .section-chara .ruhu .btn .name p:first-of-type {
    width: 30%;
    width: 206px;
    width: 32.1875vw; }

  .andore:before {
    content: "";
    position: absolute;
    top: -7vw;
    right: 21vw;
    width: 65vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara22.png") no-repeat;
    background-size: 100%; }

  .section-chara .andore .btn .name p:first-of-type {
    width: 78%;
    width: 333px;
    width: 52.03125vw; }

  .serujio:before {
    content: "";
    position: absolute;
    top: -7vw;
    right: 21vw;
    width: 51vw;
    height: 111vw;
    background: url("../../public/img/chara/pro/img-chara23.png") no-repeat;
    background-size: 100%; }

  .section-chara .serujio .btn .name p:first-of-type {
    width: 78%;
    width: 414px;
    width: 64.6875vw; }

  #kuraimaria .btnlink {
    display: block;
    width: 60%;
    height: 0;
    background: url("../../public/img/chara/btn-link.png") no-repeat;
    margin: 5vw auto 0 auto;
    padding-top: 8%;
    background-size: 100%; }

  .kuraimaria:before {
    content: "";
    position: absolute;
    top: -3.5%;
    right: -6%;
    width: 100%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara05.png") no-repeat;
    z-index: 0;
    background-size: 100%;
    padding-top: 105%; }

  .section-chara .kuraimaria .btn .name p:first-of-type {
    width: 80%;
    width: 418px;
    width: 65.3125vw; }

  .kurausu:before {
    content: "";
    position: absolute;
    top: -7%;
    right: 11%;
    width: 77%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara06.png") no-repeat;
    z-index: 0;
    background-size: 100%;
    padding-top: 113%; }

  .section-chara .kurausu .btn .name p:first-of-type {
    width: 337px;
    width: 52.65625vw; }

  .foruse:before {
    content: "";
    position: absolute;
    top: -5%;
    right: 20%;
    width: 51%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara07.png") no-repeat;
    background-size: 100%;
    padding-top: 113%; }

  .section-chara .foruse .btn .name p:first-of-type {
    width: 35%;
    width: 249px;
    width: 38.90625vw; }

  .beruga:before {
    content: "";
    position: absolute;
    top: -5%;
    right: 7%;
    width: 72%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara08.png") no-repeat;
    background-size: 100%;
    padding-top: 109%; }

  .section-chara .beruga .btn .name p:first-of-type {
    width: 35%;
    width: 186px;
    width: 29.0625vw; }

  .nikora:before {
    content: "";
    position: absolute;
    top: -1%;
    right: 26%;
    width: 37%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara09.png") no-repeat;
    background-size: 100%;
    padding-top: 103%; }

  .section-chara .nikora .btn .name p:first-of-type {
    width: 55%;
    width: 347px;
    width: 54.21875vw; }

  .kiara:before {
    content: "";
    position: absolute;
    top: 0%;
    right: 31%;
    width: 40%;
    height: 0;
    background: url("../../public/img/chara/pro/img-chara10.png") no-repeat;
    background-size: 100%;
    padding-top: 99%; }

  .section-chara .kiara .btn .name p:first-of-type {
    width: 55%;
    width: 332px;
    width: 51.875vw; }

  .section-banner {
    margin: 10% 0 20% 0; }

  .section-banner .section-inner {
    width: 80%; }
    .section-banner .section-inner .chara {
      display: inline-block;
      vertical-align: bottom;
      float: none;
      margin-top: 0;
      margin-right: 6%;
      width: 47%; }
    .section-banner .section-inner .chara:nth-of-type(1n + 9) {
      margin-top: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(2) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(4) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(3) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(5) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(6) {
      margin-right: 6%;
      margin-top: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(7) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(8) {
      margin-right: 6%;
      margin-top: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(9) {
      margin-right: 0;
      margin-top: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(10) {
      margin-right: 6%;
      margin-top: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(11) {
      margin-right: 0;
      margin-top: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(12) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(13) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(15) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(14), .section-banner .section-inner p.chara:nth-of-type(16), .section-banner .section-inner p.chara:nth-of-type(18) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(17) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(19) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(20) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(21) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(22) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(23) {
      margin-right: 0; }
    .section-banner .section-inner p.chara:nth-of-type(24) {
      margin-right: 6%; }
    .section-banner .section-inner p.chara:nth-of-type(25) {
      margin-right: 0%; }
    .section-banner .section-inner .new {
      position: relative;
      top: 0;
      left: 0;
      display: inline-block;
      width: 100%; }
    .section-banner .section-inner .new:before {
      content: "";
      position: absolute;
      bottom: 20%;
      left: 9%;
      width: 30%;
      height: 0;
      background: url("../../public/img/chara/icon-new.png") no-repeat;
      background-size: 100%;
      padding-top: 11%; }
    .section-banner .section-inner .title {
      float: none;
      text-align: center;
      margin-right: 0;
      width: 100%;
      margin: 0 auto; }
    .section-banner .section-inner p.title02 {
      margin: 4% auto 2% auto; }

  .open:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 0;
    background-size: 100%;
    padding-top: 100%;
    z-index: 1; } }
#kurodo .charaBg .btn .name p:first-child {
  width: 331px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #kurodo .charaBg .btn .name p:first-child {
      width: 331px;
      width: 25.859375vw; } }
  @media only screen and (max-width: 1023px) {
    #kurodo .charaBg .btn .name p:first-child {
      width: 331px;
      width: 51.71875vw; } }
#reili .charaBg .btn .name p:first-child {
  width: 274px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #reili .charaBg .btn .name p:first-child {
      width: 274px;
      width: 21.40625vw; } }
  @media only screen and (max-width: 1023px) {
    #reili .charaBg .btn .name p:first-child {
      width: 274px;
      width: 42.8125vw; } }
#razu .charaBg .btn .name p:first-child {
  width: 229px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #razu .charaBg .btn .name p:first-child {
      width: 229px;
      width: 17.890625vw; } }
  @media only screen and (max-width: 1023px) {
    #razu .charaBg .btn .name p:first-child {
      width: 229px;
      width: 35.78125vw; } }
#kai .charaBg .btn .name p:first-child {
  width: 253px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #kai .charaBg .btn .name p:first-child {
      width: 253px;
      width: 19.765625vw; } }
  @media only screen and (max-width: 1023px) {
    #kai .charaBg .btn .name p:first-child {
      width: 253px;
      width: 39.53125vw; } }
#annjurika .charaBg .btn .name p:first-child {
  width: 361px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #annjurika .charaBg .btn .name p:first-child {
      width: 361px;
      width: 28.203125vw; } }
  @media only screen and (max-width: 1023px) {
    #annjurika .charaBg .btn .name p:first-child {
      width: 361px;
      width: 56.40625vw; } }
#mineruba .charaBg .btn .name p:first-child {
  width: 321px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #mineruba .charaBg .btn .name p:first-child {
      width: 321px;
      width: 25.078125vw; } }
  @media only screen and (max-width: 1023px) {
    #mineruba .charaBg .btn .name p:first-child {
      width: 321px;
      width: 50.15625vw; } }
#karen .charaBg .btn .name p:first-child {
  width: 336px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #karen .charaBg .btn .name p:first-child {
      width: 336px;
      width: 26.25vw; } }
  @media only screen and (max-width: 1023px) {
    #karen .charaBg .btn .name p:first-child {
      width: 336px;
      width: 52.5vw; } }
#ragunarokku .charaBg .btn .name p:first-child {
  width: 261px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #ragunarokku .charaBg .btn .name p:first-child {
      width: 261px;
      width: 20.390625vw; } }
  @media only screen and (max-width: 1023px) {
    #ragunarokku .charaBg .btn .name p:first-child {
      width: 261px;
      width: 40.78125vw; } }
#mairuzu .charaBg .btn .name p:first-child {
  width: 280px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #mairuzu .charaBg .btn .name p:first-child {
      width: 280px;
      width: 21.875vw; } }
  @media only screen and (max-width: 1023px) {
    #mairuzu .charaBg .btn .name p:first-child {
      width: 280px;
      width: 43.75vw; } }
#dan .charaBg .btn .name p:first-child {
  width: 237px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #dan .charaBg .btn .name p:first-child {
      width: 237px;
      width: 18.515625vw; } }
  @media only screen and (max-width: 1023px) {
    #dan .charaBg .btn .name p:first-child {
      width: 237px;
      width: 37.03125vw; } }
#ronarudo .charaBg .btn .name p:first-child {
  width: 278px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #ronarudo .charaBg .btn .name p:first-child {
      width: 278px;
      width: 21.71875vw; } }
  @media only screen and (max-width: 1023px) {
    #ronarudo .charaBg .btn .name p:first-child {
      width: 278px;
      width: 43.4375vw; } }
#ro-gann .charaBg .btn .name p:first-child {
  width: 285px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #ro-gann .charaBg .btn .name p:first-child {
      width: 285px;
      width: 22.265625vw; } }
  @media only screen and (max-width: 1023px) {
    #ro-gann .charaBg .btn .name p:first-child {
      width: 285px;
      width: 44.53125vw; } }
#buraiann .charaBg .btn .name p:first-child {
  width: 323px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #buraiann .charaBg .btn .name p:first-child {
      width: 323px;
      width: 25.234375vw; } }
  @media only screen and (max-width: 1023px) {
    #buraiann .charaBg .btn .name p:first-child {
      width: 323px;
      width: 50.46875vw; } }
#mari .charaBg .btn .name p:first-child {
  width: 239px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #mari .charaBg .btn .name p:first-child {
      width: 239px;
      width: 18.671875vw; } }
  @media only screen and (max-width: 1023px) {
    #mari .charaBg .btn .name p:first-child {
      width: 239px;
      width: 37.34375vw; } }
#ruhu .charaBg .btn .name p:first-child {
  width: 206px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #ruhu .charaBg .btn .name p:first-child {
      width: 206px;
      width: 16.09375vw; } }
  @media only screen and (max-width: 1023px) {
    #ruhu .charaBg .btn .name p:first-child {
      width: 206px;
      width: 32.1875vw; } }
#andore .charaBg .btn .name p:first-child {
  width: 333px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #andore .charaBg .btn .name p:first-child {
      width: 333px;
      width: 26.015625vw; } }
  @media only screen and (max-width: 1023px) {
    #andore .charaBg .btn .name p:first-child {
      width: 333px;
      width: 52.03125vw; } }
#serujio .charaBg .btn .name p:first-child {
  width: 414px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #serujio .charaBg .btn .name p:first-child {
      width: 414px;
      width: 32.34375vw; } }
  @media only screen and (max-width: 1023px) {
    #serujio .charaBg .btn .name p:first-child {
      width: 414px;
      width: 64.6875vw; } }
#kuraimaria .charaBg .btn .name p:first-child {
  width: 418px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #kuraimaria .charaBg .btn .name p:first-child {
      width: 418px;
      width: 32.65625vw; } }
  @media only screen and (max-width: 1023px) {
    #kuraimaria .charaBg .btn .name p:first-child {
      width: 418px;
      width: 65.3125vw; } }
#kurausu .charaBg .btn .name p:first-child {
  width: 337px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #kurausu .charaBg .btn .name p:first-child {
      width: 337px;
      width: 26.328125vw; } }
  @media only screen and (max-width: 1023px) {
    #kurausu .charaBg .btn .name p:first-child {
      width: 337px;
      width: 52.65625vw; } }
#foruse .charaBg .btn .name p:first-child {
  width: 249px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #foruse .charaBg .btn .name p:first-child {
      width: 249px;
      width: 19.453125vw; } }
  @media only screen and (max-width: 1023px) {
    #foruse .charaBg .btn .name p:first-child {
      width: 249px;
      width: 38.90625vw; } }
#beruga .charaBg .btn .name p:first-child {
  width: 186px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #beruga .charaBg .btn .name p:first-child {
      width: 186px;
      width: 14.53125vw; } }
  @media only screen and (max-width: 1023px) {
    #beruga .charaBg .btn .name p:first-child {
      width: 186px;
      width: 29.0625vw; } }
#nikora .charaBg .btn .name p:first-child {
  width: 347px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #nikora .charaBg .btn .name p:first-child {
      width: 347px;
      width: 27.109375vw; } }
  @media only screen and (max-width: 1023px) {
    #nikora .charaBg .btn .name p:first-child {
      width: 347px;
      width: 54.21875vw; } }
#kiara .charaBg .btn .name p:first-child {
  width: 332px; }
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #kiara .charaBg .btn .name p:first-child {
      width: 332px;
      width: 25.9375vw; } }
  @media only screen and (max-width: 1023px) {
    #kiara .charaBg .btn .name p:first-child {
      width: 332px;
      width: 51.875vw; } }

/*# sourceMappingURL=inchara.css.map */