#chara {
  background: url(/assets/img/chara_bg_left.gif) repeat-y center left/auto 18.9rem, url(/assets/img/chara_bg_right.gif) repeat-y center right/auto 18.9rem;
}

#chara .inner {
  padding-top: 4rem;
}

.ttl {
  margin-top: 0;
}

.ttl::after {
  background-image: url(/assets/img/chara_ttl.png);
}

[class*=cont-] ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  width: 75rem;
  margin: 0 auto 0;
}

[class*=cont-] ul li:not(:first-of-type) {
  margin-top: -1.5rem;
}

[class*=cont-] ul li p {
  display: block;
  position: relative;
  width: 75rem;
  height: 20.8rem;
}

[class*=cont-] ul li p span {
  position: relative;
  display: inline-block;
  background-color: #fff;
  height: calc(100% - 1rem);
  width: calc(100% - 1rem);
  z-index: 30;
  margin: 0.5rem;
}

[class*=cont-] ul li p::before,
[class*=cont-] ul li p::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #1c445e;
  top: 0;
  z-index: 20;
}

[class*=cont-] ul li p::after {
  background-color: #172a38;
  top: 1rem;
  right: -1rem;
  z-index: 10;
}

#chara .inner .cont-chara {
  position: relative;
  width: 75rem;
  margin: 4rem auto 0;
}

#chara .inner .cont-chara ul li:nth-of-type(1) p {
  z-index: 10;
}

#chara .inner .cont-chara ul li:nth-of-type(even) p span,
#chara .inner .cont-chara ul li:nth-of-type(even) p::before,
#chara .inner .cont-chara ul li:nth-of-type(even) p::after {
  clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 74%);
}

#chara .inner .cont-chara ul li:nth-of-type(odd) p span,
#chara .inner .cont-chara ul li:nth-of-type(odd) p::before,
#chara .inner .cont-chara ul li:nth-of-type(odd) p::after {
  clip-path: polygon(0 0, 100% 25%, 100% 74%, 0% 100%);
}

#chara .inner .cont-chara ul li:first-of-type p span,
#chara .inner .cont-chara ul li:first-of-type p::before,
#chara .inner .cont-chara ul li:first-of-type p::after {
  clip-path: polygon(0 0, 100% 0%, 100% 74%, 0% 100%);
}

#chara .inner .cont-chara ul li:last-of-type:nth-of-type(even) p span,
#chara .inner .cont-chara ul li:last-of-type:nth-of-type(even) p::before,
#chara .inner .cont-chara ul li:last-of-type:nth-of-type(even) p::after {
  clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
}

#chara .inner .cont-chara ul li:last-of-type:nth-of-type(odd) p span,
#chara .inner .cont-chara ul li:last-of-type:nth-of-type(odd) p::before,
#chara .inner .cont-chara ul li:last-of-type:nth-of-type(odd) p::after {
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%);
}

#chara .inner .cont-chara ul li:nth-of-type(even) p span {
  clip-path: polygon(0 26%, 100% 0%, 100% 100%, 0% 73%);
}

#chara .inner .cont-chara ul li:nth-of-type(odd) p span {
  clip-path: polygon(0 0, 100% 26%, 100% 73%, 0% 100%);
}

#chara .inner .cont-chara ul li:first-of-type p span {
  clip-path: polygon(0 0, 100% 0%, 100% 73%, 0% 100%);
}

#chara .inner .cont-chara ul li:last-of-type:nth-of-type(even) p span {
  clip-path: polygon(0 26%, 100% 0%, 100% 100%, 0% 100%);
}

#chara .inner .cont-chara ul li:last-of-type:nth-of-type(odd) p span {
  clip-path: polygon(0 0, 100% 26%, 100% 100%, 0% 100%);
}

#chara .inner [class*=cont-] ul li p span {
  text-indent: -9999rem;
}

#chara .inner [class*=cont-] ul li a::before {
  content: "";
  position: absolute;
  z-index: 100;
  display: block;
  height: 22.2rem;
  width: 100%;
  margin: -1.8rem 0 0;
  background-repeat: no-repeat;
  background-size: auto 32.6rem, auto 13.4rem;
}

#chara .inner [class*=cont-] ul li:nth-of-type(even) a::before {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 75%);
}

#chara .inner [class*=cont-] ul li:nth-of-type(odd) a::before {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}

#chara .inner [class*=cont-] ul li:first-of-type a::before {
  clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
}

#chara .inner [class*=cont-] ul li:last-of-type:nth-of-type(even) a::before {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

#chara .inner [class*=cont-] ul li:last-of-type:nth-of-type(odd) a::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

#chara .inner [class*=cont-] ul li:nth-of-type(odd) a::before {
  background-position: left -0.4rem top 0.3rem, right 2.6rem top 3.1rem;
}

#chara .inner [class*=cont-] ul li:nth-of-type(even) a::before {
  background-position: right -0.4rem top 0.3rem, left 2.6rem top 3.1rem;
}

#chara .inner [class*=cont-] ul li:last-of-type:nth-of-type(odd) a::before {
  background-position: left -0.4rem top 0.3rem, right 2.6rem top 4.1rem;
}

#chara .inner [class*=cont-] ul li:last-of-type:nth-of-type(even) a::before {
  background-position: right -0.4rem top 0.3rem, left 2.6rem top 7.1rem;
}

#chara .inner [class*=cont-] ul li.chara-list-fighter a::before {
  background-image: url(/assets/img/chara_img_fighter.png), url(/assets/img/chara_name_fighter.png);
}

#chara .inner [class*=cont-] ul li.chara-list-knight a::before {
  background-image: url(/assets/img/chara_img_knight.png), url(/assets/img/chara_name_knight.png);
}

#chara .inner [class*=cont-] ul li.chara-list-priest a::before {
  background-image: url(/assets/img/chara_img_priest.png), url(/assets/img/chara_name_priest.png);
}

#chara .inner [class*=cont-] ul li.chara-list-wizard a::before {
  background-image: url(/assets/img/chara_img_wizard.png), url(/assets/img/chara_name_wizard.png);
}

#chara .inner [class*=cont-] ul li.chara-list-thief a::before {
  background-image: url(/assets/img/chara_img_thief.png), url(/assets/img/chara_name_thief.png);
}

#chara .inner [class*=cont-] ul li.chara-list-archer a::before {
  background-image: url(/assets/img/chara_img_archer.png), url(/assets/img/chara_name_archer.png);
}

#chara .inner .cont-chara ul li.chara-list-fighter p span {
  background: url(/assets/img/chara_bg_fighter.gif) repeat center top/2.2rem auto;
}

#chara .inner .cont-chara ul li.chara-list-knight p span {
  background: url(/assets/img/chara_bg_knight.gif) repeat center top/2.2rem auto;
}

#chara .inner .cont-chara ul li.chara-list-priest p span {
  background: url(/assets/img/chara_bg_priest.gif) repeat center top/2.2rem auto;
}

#chara .inner .cont-chara ul li.chara-list-wizard p span {
  background: url(/assets/img/chara_bg_wizard.gif) repeat center top/2.2rem auto;
}

#chara .inner .cont-chara ul li.chara-list-thief p span {
  background: url(/assets/img/chara_bg_thief.gif) repeat center top/2.2rem auto;
}

#chara .inner .cont-chara ul li.chara-list-archer p span {
  background: url(/assets/img/chara_bg_archer.gif) repeat center top/2.2rem auto;
}

#chara .inner .cont {
  width: 74rem;
  margin-top: 6rem;
  height: auto;
}

.cont-chara-detail {
  margin: 0 auto;
}

.cont-chara-detail .subttl {
  text-indent: -9999rem;
  background: url(/assets/img/chara_name_fighter.png) no-repeat center center/40.3rem auto, url(/assets/img/chara_subttl_bg.png) no-repeat center center/39.7rem auto;
  position: absolute;
  width: 50rem;
  height: 35rem;
  z-index: 100;
  margin: -14.3rem 0 0 -9.3rem;
}

.cont-chara-detail.fighter .subttl {
  background-image: url(/assets/img/chara_name_fighter.png), url(/assets/img/chara_subttl_bg.png);
}

.cont-chara-detail.knight .subttl {
  background-image: url(/assets/img/chara_name_knight.png), url(/assets/img/chara_subttl_bg.png);
}

.cont-chara-detail.priest .subttl {
  background-image: url(/assets/img/chara_name_priest.png), url(/assets/img/chara_subttl_bg.png);
}

.cont-chara-detail.thief .subttl {
  background-image: url(/assets/img/chara_name_thief.png), url(/assets/img/chara_subttl_bg.png);
}

.cont-chara-detail.wizard .subttl {
  background-image: url(/assets/img/chara_name_wizard.png), url(/assets/img/chara_subttl_bg.png);
}

.cont-chara-detail.archer .subttl {
  background-image: url(/assets/img/chara_name_archer.png), url(/assets/img/chara_subttl_bg.png);
}

.cont-chara-detail ul {
  width: 64rem;
  flex-direction: initial;
}

.cont-chara-detail ul li:not(:first-of-type) {
  margin-top: 0;
  margin-left: -2rem;
  position: relative;
}

.cont-chara-detail ul li p {
  width: 31rem;
  height: 49rem;
}

.cont-chara-detail ul li:last-of-type p {
  width: 34rem;
}

.cont-chara-detail ul li:first-of-type p span,
.cont-chara-detail ul li:first-of-type p::before,
.cont-chara-detail ul li:first-of-type p::after {
  clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}

.cont-chara-detail ul li:last-of-type p span,
.cont-chara-detail ul li:last-of-type p::before,
.cont-chara-detail ul li:last-of-type p::after {
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
}

.cont-chara-detail ul li:first-of-type p span {
  background: url(/assets/img/chara_img_fighter.png) no-repeat bottom 3rem left 1.2rem/25.8rem auto, url(/assets/img/chara_bg_fighter.gif) repeat top left/2.2rem auto;
}

.cont-chara-detail.fighter ul li:first-of-type p span {
  background-image: url(/assets/img/chara_img_fighter.png), url(/assets/img/chara_bg_fighter.gif);
}

.cont-chara-detail.knight ul li:first-of-type p span {
  background-image: url(/assets/img/chara_img_knight.png), url(/assets/img/chara_bg_knight.gif);
}

.cont-chara-detail.priest ul li:first-of-type p span {
  background-image: url(/assets/img/chara_img_priest.png), url(/assets/img/chara_bg_priest.gif);
}

.cont-chara-detail.thief ul li:first-of-type p span {
  background-image: url(/assets/img/chara_img_thief.png), url(/assets/img/chara_bg_thief.gif);
}

.cont-chara-detail.wizard ul li:first-of-type p span {
  background-image: url(/assets/img/chara_img_wizard.png), url(/assets/img/chara_bg_wizard.gif);
}

.cont-chara-detail.archer ul li:first-of-type p span {
  background-image: url(/assets/img/chara_img_archer.png), url(/assets/img/chara_bg_archer.gif);
}

.cont-chara-detail ul li:last-of-type h4 {
  position: absolute;
  z-index: 110;
  width: 100%;
  text-align: center;
  margin: 3.2rem 0 0 0;
  font-size: 2.6rem;
}

.cont-chara-detail ul li:last-of-type p span {
  padding: 8.9rem 2.5rem 3rem 4.5rem;
  height: calc(100% - 12.9rem);
  width: calc(100% - 8rem);
  line-height: 3rem;
  overflow: hidden;
  font-size: 1.8rem;
  text-align: left;
}

@media screen and (max-width: 979px) {
  #chara {
    background-size: auto 6.9rem, auto 6.9rem;
    padding-bottom: 10rem;
  }
  #chara .inner {
    padding-top: 2rem;
    padding-bottom: 17rem;
  }
  #chara .inner .cont-chara {
    width: 36rem;
    margin-top: 2rem;
  }
  [class*=cont-] ul {
    width: 36rem;
  }
  [class*=cont-] ul li:not(:first-of-type) {
    margin-top: -0.6rem;
  }
  #chara .inner [class*=cont-] ul li a::before {
    height: 10.6rem;
    margin: -1rem 0 0;
    background-size: auto 16.3rem, auto 6.7rem;
  }
  #chara .inner [class*=cont-] ul li:nth-of-type(odd) a::before {
    background-position: left -0.4rem top 0.3rem, right 2.6rem top 2.1rem;
  }
  #chara .inner [class*=cont-] ul li:nth-of-type(even) a::before {
    background-position: right -0.4rem top 0.3rem, left 2.6rem top 2.1rem;
  }
  #chara .inner [class*=cont-] ul li:first-of-type a::before {
    background-position: left -0.4rem top 0.3rem, right 2.6rem top 1.6rem;
  }
  #chara .inner [class*=cont-] ul li:last-of-type:nth-of-type(odd) a::before {
    background-position: left -0.4rem top 0.3rem, right 2.6rem top 3.1rem;
  }
  #chara .inner [class*=cont-] ul li:last-of-type:nth-of-type(even) a::before {
    background-position: right -0.4rem top 0.3rem, left 2.6rem top 3.1rem;
  }
  [class*=cont-] ul li p {
    width: 36rem;
    height: 9.8rem;
  }
  [class*=cont-] ul li p span {
    height: calc(100% - 0.5rem);
    width: calc(100% - 0.5rem);
    margin: 0.25rem;
  }
  [class*=cont-] ul li p::after {
    top: 0.5rem;
    right: -0.5rem;
  }
  #chara .inner .cont-chara ul li.chara-list-fighter p span,
  #chara .inner .cont-chara ul li.chara-list-knight p span,
  #chara .inner .cont-chara ul li.chara-list-priest p span,
  #chara .inner .cont-chara ul li.chara-list-wizard p span,
  #chara .inner .cont-chara ul li.chara-list-thief p span,
  #chara .inner .cont-chara ul li.chara-list-archer p span {
    background-size: 1.1rem auto;
  }
  #chara .inner .cont {
    width: 35.5rem;
    margin-top: 3rem;
  }
  .applink {
    margin-top: -31rem;
  }
  .cont-chara-detail .subttl {
    background: url(/assets/img/chara_name_fighter.png) no-repeat center center/19.15rem auto, url(/assets/img/chara_subttl_bg.png) no-repeat center center/19.5rem auto;
    width: 22rem;
    height: 29rem;
    margin: -7.8rem 0 0 -1rem;
  }
  .cont-chara-detail ul {
    flex-direction: column;
  }
  .cont-chara-detail ul li:not(:first-of-type) {
    margin: -1.4rem 0 0;
  }
  .cont-chara-detail ul li p {
    width: 33rem;
    height: 19rem;
  }
  .cont-chara-detail ul li:last-of-type p {
    width: 33rem;
    height: auto;
  }
  .cont-chara-detail ul li:first-of-type p span,
  .cont-chara-detail ul li:first-of-type p::before,
  .cont-chara-detail ul li:first-of-type p::after {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 85%);
  }
  .cont-chara-detail ul li:last-of-type p span,
  .cont-chara-detail ul li:last-of-type p::before,
  .cont-chara-detail ul li:last-of-type p::after {
    clip-path: polygon(0 0%, 100% 10%, 100% 100%, 0 100%);
  }
  .cont-chara-detail ul li:last-of-type p span {
    padding: 7.1rem 3rem 3rem 3rem;
    height: calc(100% - 10.6rem);
    width: calc(100% - 6.5rem);
    line-height: 2.4rem;
    font-size: 1.5rem;
  }
  .cont-chara-detail ul li:last-of-type h4 {
    margin: 3.5rem 0 0;
    font-size: 1.9rem;
  }
  .cont-chara-detail ul li:first-of-type p span {
    background-size: 14rem auto, 1.1rem auto;
    background-position: right 1.2rem center, top left;
  }
  .mfp-close {
    top: 2.9rem;
    right: 2.4rem;
    width: 2.7rem;
    height: 2.7rem;
  }
}

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