* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

html,
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.5;
  color: #052a51;
  font-family: 'noto-sans', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 600
}

@media screen and (min-width: 1024px) {

  html,
  body {
    font-size: 18px
  }
}

html {
  height: -webkit-fill-available
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available
}

img {
  width: 100%;
  vertical-align: bottom;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

a {
  color: #052a51
}

li {
  list-style: none
}

header {
  text-align: center;
  border-bottom: 1px solid #fff;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

header img {
  max-width: 1920px;
  width: min(100%, 1920px);
  margin: 0 auto
}

nav {
  position: sticky;
  top: 0;
  z-index: 100
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

nav ul li a {
  display: block;
  text-decoration: none
}

@media screen and (min-width: 1024px) {
  nav ul li a {
    padding: 0
  }
}

nav::before {
  content: "";
  height: 10px;
  display: block;
  position: relative;
  background-image: url(../img/bg_border_1.jpg);
  background-repeat: repeat
}

article::before {
  content: "";
  position: fixed;
  display: block;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-image: url(../img/bg_ptn_2.png), url(../img/bg_ptn_1.jpg);
  background-repeat: no-repeat, repeat;
  background-position: top center, top right;
  background-size: 300%, 28px
}

@media screen and (min-width: 768px) {
  article::before {
    background-size: contain, auto
  }
}

.inner {
  padding: 7% 1%
}

@media screen and (min-width: 1024px) {
  .inner {
    padding: 5% 0
  }
}

.ttl {
  max-width: 1021px;
  width: min(98%, 1021px);
  margin: 0 auto
}

.btn {
  display: block;
  max-width: 640px;
  width: min(75%, 640px);
  margin: 0 auto
}

#chara>.inner {
  padding: min(7%, 30px) 0 7%
}

@media screen and (min-width: 1024px) {
  #chara>.inner {
    padding: min(7%, 80px) 0 min(5%, 30px)
  }
}

#chara>.inner .ttl {
  margin: 3% auto 0
}

#chara>.inner .ttl_2 {
  max-width: 784px;
  width: min(98%, 784px);
  margin: 7% auto 0;
  margin: min(7%, 50px) auto 0
}

#chara>.inner .txt_1 {
  width: min(85%, 436px);
  margin: 3% auto 0
}

#chara>.inner ul.list_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 3%
}

#chara>.inner ul.list_btn li {
  max-width: 578px;
  width: min(80%, 578px);
  padding: 5px 10px
}

#chara>.inner #lineup {
  width: min(80%, 640px);
  margin: 0 auto
}

#chara>.inner #lineup img {
  margin-bottom: 15px;
}

#chara>.inner #lineup a {
  display: inline-block;
  font-size: 140%;
  margin-bottom: 10px;
}

#chara>.inner #lineup a img {
  padding-bottom: .25rem
}

#chara>.inner #set {
  max-width: 618px;
  width: min(80%, 618px);
  margin: 5% auto 0;
  background-color: hsla(0, 0%, 100%, .5)
}

@media screen and (min-width: 1024px) {
  #chara>.inner #set {
    margin: 2.5% auto 0
  }
}

#chara>.inner #set #btn_set {
  position: relative
}

#chara>.inner #set #btn_set .btn {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0)
}

#dungeon>.inner {
  padding: min(7%, 50px) 0
}

#dungeon>.inner .ttl_2 {
  max-width: 640px;
  width: min(80%, 640px);
  margin: 0 auto
}

#dungeon>.inner div[id*=d_] {
  display: block;
  margin: 5% auto 0;
  margin: min(5%, 30px) auto 0
}

#dungeon>.inner #d_1-1 {
  width: min(97.5%, 1120px);
  margin: min(7%, 50px) auto 15px;
}

#dungeon>.inner #d_1-2,
#dungeon>.inner #d_1-3 {
  width: min(97.5%, 1080px);
  margin: 0 auto
}

#dungeon>.inner #d_2 {
  width: min(90%, 810px)
}

#dungeon>.inner #d_3 {
  width: min(60%, 630px)
}

#dungeon>.inner #d_4 {
  width: min(95%, 1080px)
}

#dungeon>.inner .btn {
  margin: 5% auto 0;
  margin: min(5%, 50px) auto 0
}

#dungeon>.inner .columns-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 0 auto
}

#others>.inner {
  padding: min(7%, 30px) 1% 7%
}

@media screen and (min-width: 1024px) {
  #others>.inner {
    padding: min(7%, 30px) 0 7%
  }
}

#others>.inner .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: min(85%, 420px);
  margin: 2% auto 0;
  padding: 0 0 3%
}

@media screen and (min-width: 640px) {
  #others>.inner .wrap {
    width: min(100%, 1450px)
  }
}

#others>.inner #mpshop,
#others>.inner #login,
#others>.inner #exchange {
  margin: 10% 0 0;
  margin: min(7%, 30px) 0 0
}

#others>.inner #mpshop dl,
#others>.inner #login dl,
#others>.inner #exchange dl {
  max-width: 470px;
  width: min(97.5%, 470px);
  margin: 0 auto;
  border: 5px solid #19538f;
  background-color: hsla(0, 0%, 100%, .5)
}

#others>.inner #mpshop .btn,
#others>.inner #login .btn,
#others>.inner #exchange .btn {
  max-width: 437px;
  width: min(70%, 437px);
  margin: 0 auto 5%;
  margin: 0 auto min(5%, 50px)
}

#foot {
  background: #000
}

#foot .inner {
  padding: 0;
  max-width: 1280px;
  width: min(99%, 1280px);
  margin: 0 auto
}

#pagetop {
  display: none;
  position: fixed;
  width: 69px;
  width: min(11.5%, 88px);
  bottom: 10px;
  right: 10px;
  z-index: 10;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.download_box {
  margin-top: 5px
}

.download_box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 765px;
  gap: 15px;
  margin: 0 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.download_box ul li {
  list-style: none;
  margin-right: 5px;
  max-width: 160px
}

@media screen and (min-width: 640px) {
  .download_box ul li {
    max-width: 320px
  }
}

.download_box ul li:last-child {
  margin-right: 0
}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 220px;
  margin: 25px auto 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.social li {
  list-style: none
}

#copyright {
  text-align: center;
  background: #1c1c1c;
  padding: 10px 0
}

#copyright p {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  margin-top: 0
}

footer {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  color: #000
}

footer::before {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  margin: 0 auto
}

footer .inner {
  margin: 0 auto;
  padding: 30px;
  width: 95%
}

footer p {
  color: #000;
  font-weight: 400
}

footer dl {
  margin: 0 auto;
}

footer dl dt {
  font-size: 150%;
  font-weight: bold
}

footer .copy {
  margin-top: 15px;
}

footer .download_box {
  margin: 20px 0;
}

footer .f-text,
footer .f-text span {
  font-size: 16px;
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  footer {
    padding: 60px 10px;
  }
  

  footer dl dt {
    font-size: 200%
  }
}

footer .back-to-top {
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  padding: 25px 0 15px
}

footer .back-to-top a {
  text-decoration: none;
  color: #000
}

.bnr_ad {
  width: min(80%, 480px);
  margin: 15px auto 0
}

@media screen and (min-width: 768px) {
  .bnr_ad {
    margin: 30px auto 0
  }
}

.overlay {
  position: fixed;
  background-color: hsla(0, 0%, 100%, .9);
  width: 100%;
  height: 100%;
  opacity: 1;
  top: 0;
  z-index: 1000;
  border-bottom: 10px solid #19538f;
  border-top: 10px solid #19538f
}

.in-b {
  display: inline-block
}

.tac,
.center {
  text-align: center
}

.f_0-8x {
  font-size: .8em
}

.f_1-5x {
  font-size: 1.5em
}

.fs10 {
  font-size: 10% !important
}

.fs20 {
  font-size: 20% !important
}

.fs30 {
  font-size: 30% !important
}

.fs40 {
  font-size: 40% !important
}

.fs50 {
  font-size: 50% !important
}

.fs60 {
  font-size: 60% !important
}

.fs70 {
  font-size: 70% !important
}

.fs80 {
  font-size: 80% !important
}

.fs90 {
  font-size: 90% !important
}

.fs100 {
  font-size: 100% !important
}

.fs110 {
  font-size: 110% !important
}

.fs120 {
  font-size: 120% !important
}

.fs130 {
  font-size: 130% !important
}

.fs140 {
  font-size: 140% !important
}

.fs150 {
  font-size: 150% !important
}

.fs10 {
  font-size: 10% !important
}

.fs20 {
  font-size: 20% !important
}

.fs30 {
  font-size: 30% !important
}

.fs40 {
  font-size: 40% !important
}

.fs50 {
  font-size: 50% !important
}

.fs60 {
  font-size: 60% !important
}

.fs70 {
  font-size: 70% !important
}

.fs80 {
  font-size: 80% !important
}

.fs90 {
  font-size: 90% !important
}

.fs100 {
  font-size: 100% !important
}

.fs110 {
  font-size: 110% !important
}

.fs120 {
  font-size: 120% !important
}

.fs130 {
  font-size: 130% !important
}

.fs140 {
  font-size: 140% !important
}

.fs150 {
  font-size: 150% !important
}

.mt0 {
  margin-top: 0px !important
}

.mb0 {
  margin-bottom: 0px !important
}

.mt10 {
  margin-top: 10px !important
}

.mb10 {
  margin-bottom: 10px !important
}

.mt20 {
  margin-top: 20px !important
}

.mb20 {
  margin-bottom: 20px !important
}

.mt30 {
  margin-top: 30px !important
}

.mb30 {
  margin-bottom: 30px !important
}

.mt40 {
  margin-top: 40px !important
}

.mb40 {
  margin-bottom: 40px !important
}

.mt50 {
  margin-top: 50px !important
}

.mb50 {
  margin-bottom: 50px !important
}

.c-modal-close {
  width: 36px;
  width: clamp(20px, 9vw, 54px);
  height: 36px;
  height: clamp(20px, 9vw, 54px);
  text-align: center;
  cursor: pointer
}

.c-modal-close>img {
  pointer-events: none
}

.c-kakusei-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  height: 16px;
  height: clamp(16px, 5.5vw, 25px)
}

.c-kakusei-list dd ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px
}

.c-kakusei-list dd li {
  width: 20px;
  width: clamp(16px, 4.5vw, 24px)
}

.c-kakusei-list--sync dt {
  color: #0e1f5b
}

.c-leader-skill-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px
}

.c-leader-skill-txt .per {
  color: #f50505
}

.c-evo-btn-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 10px;
  padding: 0 10px;
  gap: 2px;
  gap: clamp(2px, .5vw, 8px);
  pointer-events: auto
}

.c-evo-btn-list__item {
  width: min(25%, 208px);
  font-size: 0
}

.p-modal-ability .c-evo-btn-list__item {
  width: min(25%, 160px)
}

.c-evo-btn-list__item>a {
  display: inline-block
}

.c-evo-btn-list__item img {
  height: auto
}

.c-evo-btn-list__item.is-active a {
  cursor: default
}

.c-es-btn {
  display: block;
  width: min(8.5vw, 68px)
}

.c-es-btn>img {
  pointer-events: none
}

.c-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_modal_1.png) no-repeat center center, url(../img/bg_ptn_3.png) repeat center center;
  background-size: cover, 8px;
  cursor: pointer;
  z-index: 100
}

.c-overlay::after {
  content: "";
  display: block;
  height: 200%;
  width: min(90%, 820px);
  margin: 0 auto
}

.p-chara-list,
.p-chara-list * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.p-chara-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  max-width: 616px;
  margin: 40px auto 0;
  margin: clamp(20px, 5vw, 40px) auto 0;
  padding: 0px 4px;
  gap: 30px 8px;
  gap: clamp(30px, 8vw, 48px) 8px
}

.p-chara-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc((100% - 8px)/2)
}

.p-chara-list__item img {
  width: auto;
  height: auto;
  max-width: 100%
}

.p-chara-details-btn>a {
  display: inline-block
}

.p-modal-illust,
.p-modal-ability,
.p-modal-illust *,
.p-modal-ability * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.p-modal-illust,
.p-modal-ability {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 101
}

.p-modal-illust-box__img,
.p-modal-ability-box__img,
.p-modal-ability-box__others {
  pointer-events: auto
}

.p-illust-box__wrap {
  position: absolute;
  top: 0
}

.p-illust-box__img-bg {
  position: absolute;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  top: 8%
}

.p-illust-box__img {
  position: relative
}

.p-modal-illust img,
.p-modal-ability img {
  height: auto;
  max-width: 100%;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}

.p-modal-illust-box {
  position: relative;
  width: min(100vw, 960px);
  margin: 0 auto
}

.p-modal-illust-box__img {
  position: relative;
  width: min(100%, 960px);
  margin: 0 auto;
  text-align: center
}

.p-modal-illust-box__img>img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto
}

.p-modal-illust-cover {
  position: relative;
  display: block;
  content: "";
  width: 100%;
  height: 0;
  padding-top: 71.875%;
  pointer-events: none
}

.p-modal-illust-box__img .c-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(-25%, -25%);
  transform: translate(-25%, -25%)
}

.p-modal-ability-box {
  position: relative;
  width: min(100vw, 600px);
  margin: 0 auto
}

.p-modal-ability-box__img {
  position: relative;
  width: min(85%, 600px);
  max-width: 47vh;
  margin: 0 auto
}

.p-modal-ability-cover {
  position: relative;
  display: block;
  content: "";
  width: 100%;
  height: 0;
  padding-top: 149.21875%;
  pointer-events: none
}

.p-modal-ability-box__img>img {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #928160
}

.p-modal-ability-box__img.is-darken>img {
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7)
}

.p-modal-ability-box__img .c-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(35%, -35%);
  transform: translate(35%, -35%)
}

.p-modal-ability-box__others {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px 20px;
  margin-top: 10px;
  padding: 0 10px;
  color: #0e1f5b;
  font-size: 12px;
  font-size: clamp(10px, 2.66vw, 16px);
  font-weight: bold;
  line-height: 1.3
}

.c-modal-close img {
  background: hsla(0, 0%, 100%, .8)
}

.p-es {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

.p-es__img {
  display: block;
  padding: 0 10px
}

.p-es__img>img {
  border: 1px solid #b4c03a
}

.p-es .c-es-btn {
  position: absolute;
  top: 50%;
  left: -3vw;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

.p-modal-notice {
  margin-top: 10px;
  padding: 0 10px;
  font-size: 12px;
  font-size: clamp(10px, 1.4vw, 14px);
  color: #fff;
  pointer-events: auto
}

.p-modal-notice p {
  margin-top: 0
}

.opacity-enter {
  opacity: 0
}

.opacity-enter-active {
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in
}

.opacity-enter-to {
  opacity: 1
}

.opacity-leave {
  opacity: 1
}

.opacity-leave-active {
  -webkit-transition: opacity 0s ease-in;
  transition: opacity 0s ease-in
}

.opacity-leave-to {
  opacity: 0
}

.c-overlay.opacity-leave-active {
  -webkit-transition-duration: .15s;
  transition-duration: .15s
}

.no-flexbox-gap .c-kakusei-list>* {
  margin-right: 10px
}

.no-flexbox-gap .c-kakusei-list>*:last-child {
  margin-right: 0
}

.no-flexbox-gap .c-kakusei-list dd ul>* {
  margin-right: 4px
}

.no-flexbox-gap .c-kakusei-list dd ul>*:last-child {
  margin-right: 0
}

.no-flexbox-gap .c-leader-skill-txt>* {
  margin-right: 10px
}

.no-flexbox-gap .c-leader-skill-txt>*:last-child {
  margin-right: 0
}

.no-flexbox-gap .c-evo-btn-list>* {
  margin-right: 4px;
  margin-right: clamp(2px, 1.6vw, 8px)
}

.no-flexbox-gap .c-evo-btn-list>*:last-child {
  margin-right: 0
}

.no-flexbox-gap .p-chara-list>* {
  margin-right: 14px;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-bottom: clamp(30px, 8vw, 48px)
}

.no-flexbox-gap .p-chara-list>*:nth-child(2n) {
  margin-right: 0
}

.no-flexbox-gap .p-modal-ability-box__others>* {
  margin-right: 20px;
  margin-bottom: 5px
}

.no-flexbox-gap .p-modal-ability-box__others>*:last-child {
  margin-right: 0
}

@media screen and (min-width: 641px) {
  .p-chara-list {
    max-width: 947px;
    padding: 0 8px
  }

  .p-chara-list__item {
    width: calc((100% - 16px)/3)
  }

  .p-modal-illust-box {
    width: min(100vw - 17px, 960px)
  }

  .p-modal-ability-box {
    width: min(70vw, 600px)
  }

  .p-es .c-es-btn {
    left: -10px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  .no-flexbox-gap .p-chara-list>*:nth-child(2n) {
    margin-right: 14px
  }

  .no-flexbox-gap .p-chara-list>*:nth-child(3n) {
    margin-right: 0
  }
}

@media screen and (min-width: 641px)and (orientation: landscape) {
  .c-kakusei-list dd li {
    width: 16px;
    width: clamp(16px, 5.5vw, 18px)
  }

  .p-modal-illust-box__img {
    max-width: 110vh
  }

  .p-modal-ability-box__others {
    font-size: 12px;
    font-size: clamp(10px, 1.4vw, 16px)
  }
}

@media screen and (min-width: 641px)and (max-width: 1023px)and (orientation: landscape) {
  .c-modal-close {
    width: 40px;
    width: clamp(40px, 5vw, 54px);
    height: 40px;
    height: clamp(40px, 5vw, 54px);
    font-size: 24px;
    font-size: clamp(24px, 4vw, 40px)
  }

  .c-evo-btn-list__item {
    width: min(25%, 208px)
  }

  .p-modal-ability-box__others {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
}

@media screen and (min-width: 1024px) {
  .c-kakusei-list dd li {
    width: 24px;
    width: clamp(16px, 5.5vw, 24px)
  }

  .c-evo-btn-list {
    padding: 0
  }

  .c-modal-close {
    width: 54px;
    width: clamp(40px, 5vw, 54px);
    height: 54px;
    height: clamp(40px, 5vw, 54px);
    font-size: 40px;
    font-size: clamp(24px, 4vw, 40px)
  }

  .p-chara-list {
    max-width: 1642px
  }

  .p-chara-list__item {
    width: min((100% - 42px)/4, 384px)
  }

  .p-modal-illust-box__img .c-modal-close {
    -webkit-transform: translate(25%, -25%);
    transform: translate(25%, -25%)
  }

  .p-modal-ability-box__others,
  .p-modal-notice {
    padding: 0
  }

  .no-flexbox-gap .p-chara-list>*:nth-child(3n) {
    margin-right: 14px
  }

  .no-flexbox-gap .p-chara-list>*:nth-child(4n) {
    margin-right: 0
  }
}

@media screen and (min-width: 1367px)and (orientation: landscape) {
  .p-modal-ability-box__img {
    width: min(100%, 600px);
    max-width: 52vh
  }
}