@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ===================================================================
CSS information
 file name  :character.css
 style info :キャラクターページのスタイル
=================================================================== */
@media screen and (min-width: 768px) {
  body:before {
    background-image: url(../img/character/bg_character_pc.jpg);
  }
}
@media screen and (max-width: 767px) {
  body:before {
    background-image: url(../img/character/bg_character_sp.jpg);
  }
}

@media screen and (max-width: 767px) {
  .contentArea {
    padding-bottom: 0;
  }
}
.sub .contentArea {
  padding-bottom: 0;
}
.contentArea .unmei {
  bottom: 0;
  -webkit-transition: none;
  transition: none;
}
@media screen and (min-width: 768px) {
  .contentArea .unmei {
    position: fixed;
    right: calc(50% - min(54vw, 660px));
    width: min(42vw, 500px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .unmei {
    right: calc(50% - 40vw);
    width: 28vw;
  }
}
@media screen and (max-height: 900px) and (min-width: 768px) {
  .contentArea .unmei {
    right: calc(50% - min(50vw, 540px));
    width: min(34vw, 420px);
  }
}
@media screen and (max-width: 767px) {
  .contentArea .unmei {
    position: absolute;
    right: 0;
    width: 60vw;
  }
}
.contentArea .character {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .contentArea .character {
    padding: 40px 0 120px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character {
    padding: 2vw 0 5vw;
  }
}
.contentArea .character .inner {
  text-align: left;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner {
    width: min(96%, 1180px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner {
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner {
    padding-bottom: 84vw;
  }
}
.contentArea .character .inner .nameBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  width: 50%;
}
:lang(en) .contentArea .character .inner .nameBox, :lang(fr) .contentArea .character .inner .nameBox, :lang(it) .contentArea .character .inner .nameBox, :lang(de) .contentArea .character .inner .nameBox, :lang(es) .contentArea .character .inner .nameBox, :lang(pt-BR) .contentArea .character .inner .nameBox, .pt-br .contentArea .character .inner .nameBox {
  width: 46%;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nameBox .icn {
    width: min(32%, 120px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nameBox .icn {
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nameBox .icn {
    width: 14vw;
  }
}
.contentArea .character .inner .nameBox .txt {
  position: relative;
  color: #fff;
  display: inline-block;
  font-weight: 900;
  text-shadow: 0em 0em 0.2em #000;
  padding-left: 1em;
  margin-left: -0.6em;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nameBox .txt {
    font-size: 36px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nameBox .txt {
    font-size: 2vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .contentArea .character .inner .nameBox .txt {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nameBox .txt {
    font-size: 5vw;
  }
}
:lang(en) .contentArea .character .inner .nameBox .txt, :lang(fr) .contentArea .character .inner .nameBox .txt, :lang(it) .contentArea .character .inner .nameBox .txt, :lang(de) .contentArea .character .inner .nameBox .txt, :lang(es) .contentArea .character .inner .nameBox .txt, :lang(pt-BR) .contentArea .character .inner .nameBox .txt, .pt-br .contentArea .character .inner .nameBox .txt {
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  :lang(en) .contentArea .character .inner .nameBox .txt, :lang(fr) .contentArea .character .inner .nameBox .txt, :lang(it) .contentArea .character .inner .nameBox .txt, :lang(de) .contentArea .character .inner .nameBox .txt, :lang(es) .contentArea .character .inner .nameBox .txt, :lang(pt-BR) .contentArea .character .inner .nameBox .txt, .pt-br .contentArea .character .inner .nameBox .txt {
    font-size: 32px;
  }
}
@media screen and (min-width: 1921px) {
  :lang(en) .contentArea .character .inner .nameBox .txt, :lang(fr) .contentArea .character .inner .nameBox .txt, :lang(it) .contentArea .character .inner .nameBox .txt, :lang(de) .contentArea .character .inner .nameBox .txt, :lang(es) .contentArea .character .inner .nameBox .txt, :lang(pt-BR) .contentArea .character .inner .nameBox .txt, .pt-br .contentArea .character .inner .nameBox .txt {
    font-size: 1.8vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  :lang(en) .contentArea .character .inner .nameBox .txt, :lang(fr) .contentArea .character .inner .nameBox .txt, :lang(it) .contentArea .character .inner .nameBox .txt, :lang(de) .contentArea .character .inner .nameBox .txt, :lang(es) .contentArea .character .inner .nameBox .txt, :lang(pt-BR) .contentArea .character .inner .nameBox .txt, .pt-br .contentArea .character .inner .nameBox .txt {
    font-size: 28px;
  }
}
@media screen and (min-width: 768px) and (max-width: 880px) {
  :lang(en) .contentArea .character .inner .nameBox .txt, :lang(fr) .contentArea .character .inner .nameBox .txt, :lang(it) .contentArea .character .inner .nameBox .txt, :lang(de) .contentArea .character .inner .nameBox .txt, :lang(es) .contentArea .character .inner .nameBox .txt, :lang(pt-BR) .contentArea .character .inner .nameBox .txt, .pt-br .contentArea .character .inner .nameBox .txt {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) .contentArea .character .inner .nameBox .txt, :lang(fr) .contentArea .character .inner .nameBox .txt, :lang(it) .contentArea .character .inner .nameBox .txt, :lang(de) .contentArea .character .inner .nameBox .txt, :lang(es) .contentArea .character .inner .nameBox .txt, :lang(pt-BR) .contentArea .character .inner .nameBox .txt, .pt-br .contentArea .character .inner .nameBox .txt {
    font-size: 4vw;
  }
}
.contentArea .character .inner .nameBox .txt .sub {
  display: block;
  color: #a6d5ff;
  font-weight: 700;
  text-align: center;
  text-shadow: none;
  margin-top: -0.4em;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nameBox .txt .sub {
    font-size: 14px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nameBox .txt .sub {
    font-size: 0.8vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nameBox .txt .sub {
    font-size: 2.2vw;
  }
}
.contentArea .character .inner .nameBox .txt:before {
  display: block;
  content: "";
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat 0 0/100%;
  width: 0.5em;
  height: 0.6em;
  position: absolute;
  left: 0;
  top: 0.9em;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
:lang(en) .contentArea .character .inner .nameBox .txt:before, :lang(fr) .contentArea .character .inner .nameBox .txt:before, :lang(it) .contentArea .character .inner .nameBox .txt:before, :lang(de) .contentArea .character .inner .nameBox .txt:before, :lang(es) .contentArea .character .inner .nameBox .txt:before, :lang(pt-BR) .contentArea .character .inner .nameBox .txt:before, .pt-br .contentArea .character .inner .nameBox .txt:before {
  top: 0.6em;
}
.contentArea .character .inner .nagumoharaBox {
  background: url(../img/character/bg_list_magumohara.jpg) no-repeat center center/cover;
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nagumoharaBox {
    width: min(70%, 730px);
    padding: 20px;
    margin-bottom: min(3vw, 40px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nagumoharaBox {
    width: 66%;
    padding: 1vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nagumoharaBox {
    width: 92%;
    padding: 2vw;
    margin: 0 auto 4vw;
  }
}
.contentArea .character .inner .nagumoharaBox .main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nagumoharaBox .main {
    gap: 0 10px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nagumoharaBox .main {
    gap: 0 0.5vw;
    margin-bottom: 1vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nagumoharaBox .main {
    gap: 0 0.5vw;
    margin-bottom: 2vw;
  }
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nagumoharaBox .main .icn {
    width: 120px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nagumoharaBox .main .icn {
    width: 18%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nagumoharaBox .main .icn {
    width: 18%;
  }
}
.contentArea .character .inner .nagumoharaBox .main .nameBox {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.contentArea .character .inner .nagumoharaBox .main .nameBox .txt .sub {
  text-align: left;
}
.contentArea .character .inner .nagumoharaBox .main .nameBox .txt::before {
  display: none;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .nagumoharaBox .list {
    width: 100%;
    gap: min(2vw, 20px) 0;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .nagumoharaBox .list {
    gap: 1vw 0;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .nagumoharaBox .list {
    padding: 0;
  }
}
.contentArea .character .inner .nagumoharaBox .list li {
  border: 1px solid #fff;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.contentArea .character .inner .nagumoharaBox .list li a {
  aspect-ratio: 73/29;
}
.contentArea .character .inner .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .list {
    width: min(70%, 730px);
    gap: min(3vw, 40px) 0;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .list {
    width: 66%;
    gap: 2vw 0;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .list {
    gap: 4vw 0;
    padding: 0 4vw;
  }
}
.contentArea .character .inner .list li {
  background: url(../img/character/bg_list.jpg) no-repeat 0 0/cover;
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .list li.new:before {
    left: 14px;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .list li.new:before {
    left: 2vw;
  }
}
.contentArea .character .inner .list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  aspect-ratio: 73/25;
}
.contentArea .character .inner .list li a figure {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .contentArea .character .inner .list li a figure {
    width: min(64%, 460px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .character .inner .list li a figure {
    width: 62%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .character .inner .list li a figure {
    width: 54vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  :lang(en) .contentArea .character .inner .list li a figure {
    width: 58%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) .contentArea .character .inner .list li.tofuikokukan .txt, :lang(de) .contentArea .character .inner .list li.tofuikokukan .txt {
    font-size: 26px;
  }
}
.contentArea .characterTeam h2 {
  position: relative;
  background: url(../img/shared/bg_soccer_pat.png) repeat center center, linear-gradient(60deg, rgb(24, 0, 143) 0%, rgb(0, 77, 182) 36%, rgb(0, 184, 238) 70%, rgb(125, 204, 243) 100%) 0% 0%;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam h2 {
    background-size: 88px, auto;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam h2 {
    background-size: 4vw, auto;
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam h2 {
    background-size: 4em, auto;
    margin-bottom: 8vw;
  }
}
.contentArea .characterTeam h2 .in {
  position: relative;
  overflow: hidden;
}
.contentArea .characterTeam h2 .in .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam h2 .in .box {
    width: min(96%, 1260px);
    height: 170px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam h2 .in .box {
    width: 60%;
    height: 8vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam h2 .in .box {
    width: 88%;
    height: 26vw;
  }
}
.contentArea .characterTeam h2 .in .box .inTxt {
  font-weight: 900;
  text-align: left;
  text-shadow: 0em 0em 0.2em #000;
  background: url(../img/shared/icn_inazuma.svg) no-repeat top 0.5em left/0.7em;
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam h2 .in .box .inTxt {
    font-size: 46px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam h2 .in .box .inTxt {
    font-size: 2.4vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam h2 .in .box .inTxt {
    font-size: 7.6vw;
  }
}
:lang(en) .contentArea .characterTeam h2 .in .box .inTxt, :lang(fr) .contentArea .characterTeam h2 .in .box .inTxt, :lang(it) .contentArea .characterTeam h2 .in .box .inTxt, :lang(de) .contentArea .characterTeam h2 .in .box .inTxt, :lang(es) .contentArea .characterTeam h2 .in .box .inTxt, :lang(pt-BR) .contentArea .characterTeam h2 .in .box .inTxt, .pt-br .contentArea .characterTeam h2 .in .box .inTxt {
  line-height: 1.2;
  background-position: top 0.2em left;
}
@media screen and (min-width: 768px) {
  :lang(en) .contentArea .characterTeam h2 .in .box .inTxt, :lang(fr) .contentArea .characterTeam h2 .in .box .inTxt, :lang(it) .contentArea .characterTeam h2 .in .box .inTxt, :lang(de) .contentArea .characterTeam h2 .in .box .inTxt, :lang(es) .contentArea .characterTeam h2 .in .box .inTxt, :lang(pt-BR) .contentArea .characterTeam h2 .in .box .inTxt, .pt-br .contentArea .characterTeam h2 .in .box .inTxt {
    font-size: 42px;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) .contentArea .characterTeam h2 .in .box .inTxt, :lang(fr) .contentArea .characterTeam h2 .in .box .inTxt, :lang(it) .contentArea .characterTeam h2 .in .box .inTxt, :lang(de) .contentArea .characterTeam h2 .in .box .inTxt, :lang(es) .contentArea .characterTeam h2 .in .box .inTxt, :lang(pt-BR) .contentArea .characterTeam h2 .in .box .inTxt, .pt-br .contentArea .characterTeam h2 .in .box .inTxt {
    font-size: 6.2vw;
  }
}
@media screen and (min-width: 768px) {
  :lang(es) .contentArea .characterTeam h2 .in .box .inTxt .esbr {
    display: none;
  }
}
.contentArea .characterTeam h2 .in .box .inTxt ruby {
  ruby-position: under;
  -webkit-ruby-position: after;
  ruby-align: start;
}
.contentArea .characterTeam h2 .in .box .inTxt ruby rt {
  color: #a6d5ff;
  font-weight: 700;
  text-shadow: none;
  margin: 0.4em 0 0 0.2em;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam h2 .in .box .inTxt ruby rt {
    font-size: 14px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam h2 .in .box .inTxt ruby rt {
    font-size: 0.8vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam h2 .in .box .inTxt ruby rt {
    font-size: 2.2vw;
  }
}
.safari .contentArea .characterTeam h2 .in .box .inTxt ruby rt {
  translate: 0 -0.2em;
}
.ff .contentArea .characterTeam h2 .in .box .inTxt ruby rt {
  position: relative;
  top: -0.5em;
}
.android .contentArea .characterTeam h2 .in .box .inTxt ruby rt {
  translate: 0 0.4em;
}
.contentArea .characterTeam h2 .in:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(../img/character/bg_ttl.jpg) no-repeat center center/cover;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam h2 .in:after {
    clip-path: polygon(4% 0, 100% 0%, 100% 100%, 0% 100%);
    left: 60%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam h2 .in:after {
    clip-path: polygon(6% 0, 100% 0%, 100% 100%, 0% 100%);
    left: 58%;
  }
}
.contentArea .characterTeam h2 .icn {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam h2 .icn {
    top: -42px;
    left: calc(60% + 100px);
    width: 250px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam h2 .icn {
    top: -1.5vw;
    left: calc(60% + 5vw);
    width: 11vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .contentArea .characterTeam h2 .icn {
    left: calc(60% + 40px);
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam h2 .icn {
    top: -5vw;
    left: calc(58% + 4vw);
    width: 36vw;
  }
}
.contentArea .characterTeam .main {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .main {
    width: min(96%, 1120px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .main {
    width: 56%;
  }
}
.contentArea .characterTeam .teamBox {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox {
    clip-path: ellipse(100% 50% at 50% 50%);
    background-image: url(../img/character/bg_character_list_pc.jpg);
    padding: 230px 0 200px;
    margin-top: -180px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox {
    clip-path: ellipse(120% 50% at 50% 50%);
    padding: 10vw 0;
    margin-top: -8vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .contentArea .characterTeam .teamBox {
    clip-path: ellipse(140% 50% at 50% 50%);
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox {
    clip-path: ellipse(220% 50% at 50% 50%);
    background-image: url(../img/character/bg_character_list_sp.jpg);
    padding: 20vw 0 30vw;
    margin-top: -18vw;
  }
}
.contentArea .characterTeam .teamBox .movieItem {
  background: linear-gradient(60deg, #7cff85, #eaff00);
  border-radius: 20px;
  padding: 4px;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .movieItem {
    width: 600px;
    margin: -40px auto 40px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .movieItem {
    width: 30%;
    margin: 0 auto 4vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .movieItem {
    width: 90%;
    margin: 0 auto 6vw;
  }
}
.contentArea .characterTeam .teamBox .movieItem a {
  display: block;
  border-radius: 18px;
  overflow: hidden;
}
.contentArea .characterTeam .teamBox .movieItem a figure {
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.contentArea .characterTeam .teamBox .movieItem a p {
  color: #006836;
  font-weight: 700;
  text-align: center;
  padding: 1em;
  min-height: 6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 0.5em;
}
.contentArea .characterTeam .teamBox .movieItem a p:before {
  display: block;
  content: "";
  background: url(../img/shared/icn_play.png) no-repeat center center/100%;
  width: 2em;
  height: 2em;
}
.contentArea .characterTeam .teamBox .movieItem:hover {
  background: linear-gradient(60deg, #ffc000, #ff3f3a);
}
.contentArea .characterTeam .teamBox .movieItem:hover p {
  color: #fff;
}
.contentArea .characterTeam .teamBox .detailList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 30px;
    width: min(96%, 1080px);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .detailList {
    gap: 1vw;
    width: 54%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 4vw 0;
    width: 90%;
  }
}
.contentArea .characterTeam .teamBox .detailList li {
  position: relative;
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 12px, rgba(0, 0, 0, 0.85) 12px, rgba(0, 0, 0, 0.85) 18px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li {
    width: calc((100% - 60px) / 3);
    padding: 15px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .detailList li {
    width: calc((100% - 2vw) / 3);
    padding: 1vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .contentArea .characterTeam .teamBox .detailList li {
    width: calc((100% - 30px) / 2);
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList li {
    padding: 3vw;
  }
}
.contentArea .characterTeam .teamBox .detailList li figure {
  background: url(../img/character/bg_chara_list.jpg) no-repeat center center/cover;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li figure {
    width: 44%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList li figure {
    width: 28%;
  }
}
.contentArea .characterTeam .teamBox .detailList li .info {
  font-weight: 900;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li .info {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList li .info {
    width: 66%;
  }
}
.contentArea .characterTeam .teamBox .detailList li .info .posi {
  display: inline-block;
  color: #000;
  text-align: center;
  line-height: 1.2;
  border-radius: 100px;
  padding: 0.1em 1em 0.2em;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li .info .posi {
    font-size: 18px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .detailList li .info .posi {
    font-size: 0.9vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .contentArea .characterTeam .teamBox .detailList li .info .posi {
    font-size: 16px;
  }
}
.safari .contentArea .characterTeam .teamBox .detailList li .info .posi {
  margin-bottom: 0;
}
:lang(en) .contentArea .characterTeam .teamBox .detailList li .info .posi {
  padding: 0.1em 1em;
  margin-bottom: 0.5em;
}
.contentArea .characterTeam .teamBox .detailList li .info .posi.fw {
  background: #ff4800;
}
.contentArea .characterTeam .teamBox .detailList li .info .posi.mf {
  background: #ff9c00;
}
.contentArea .characterTeam .teamBox .detailList li .info .posi.df {
  background: #4dcfff;
}
.contentArea .characterTeam .teamBox .detailList li .info .posi.gk {
  color: #007ece;
  background: #fff;
}
.contentArea .characterTeam .teamBox .detailList li .info .posi.mg {
  color: #fff;
  background: #5cd045;
}
.contentArea .characterTeam .teamBox .detailList li .info .posi.dr {
  color: #fff;
  background: #666;
  padding: 0.1em 1em;
}
.contentArea .characterTeam .teamBox .detailList li .info .name {
  color: #e9ff0c;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name {
    font-size: 21px;
    margin-bottom: 0.2em;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name {
    font-size: 1.1vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name {
    font-size: 4.6vw;
    margin-bottom: 0.1em;
  }
}
:lang(en) .contentArea .characterTeam .teamBox .detailList li .info .name {
  line-height: 1.2;
}
@media screen and (min-width: 768px) and (max-width: 880px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name br {
    display: block !important;
  }
}
.contentArea .characterTeam .teamBox .detailList li .info .name rt {
  font-weight: 700;
  ruby-align: center;
  text-align: center;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name rt {
    font-size: 9px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name rt {
    font-size: 0.3vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList li .info .name rt {
    font-size: 2.2vw;
  }
}
.safari .contentArea .characterTeam .teamBox .detailList li .info .name rt {
  translate: 0 0.5em;
}
.ff .contentArea .characterTeam .teamBox .detailList li .info .name rt {
  position: relative;
  top: 0.5em;
}
.contentArea .characterTeam .teamBox .detailList li .info .cv {
  color: #cccccc;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .detailList li .info .cv {
    font-size: 16px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .detailList li .info .cv {
    font-size: 0.8vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .detailList li .info .cv {
    font-size: 3.6vw;
  }
}
.contentArea .characterTeam .teamBox .specialBtn {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .teamBox .specialBtn {
    width: min(96%, 900px);
    margin-top: 80px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .teamBox .specialBtn {
    width: 40%;
    margin-top: 4vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .teamBox .specialBtn {
    width: 90%;
    margin-top: 10vw;
  }
}
.contentArea .characterTeam .fuwaBox {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox {
    gap: 0 60px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox {
    gap: 0 2vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .fuwaBox {
    gap: 0 4%;
  }
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox figure {
    width: 241px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox figure {
    width: 14vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .fuwaBox figure {
    width: 34%;
  }
}
.contentArea .characterTeam .fuwaBox .info {
  font-weight: 900;
  text-align: left;
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 12px, rgba(0, 0, 0, 0.85) 12px, rgba(0, 0, 0, 0.85) 18px);
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox .info {
    padding: 50px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox .info {
    padding: 1.5vw 2vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .fuwaBox .info {
    width: 50%;
    padding: 6vw;
  }
}
.contentArea .characterTeam .fuwaBox .info .posi {
  display: inline-block;
  color: #000;
  text-align: center;
  line-height: 1.2;
  border-radius: 100px;
  padding: 0.1em 1em 0.2em;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox .info .posi {
    font-size: 18px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox .info .posi {
    font-size: 0.8vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .contentArea .characterTeam .fuwaBox .info .posi {
    font-size: 16px;
  }
}
.safari .contentArea .characterTeam .fuwaBox .info .posi {
  margin-bottom: 0;
}
:lang(en) .contentArea .characterTeam .fuwaBox .info .posi {
  padding: 0.1em 1em;
  margin-bottom: 0.5em;
}
.contentArea .characterTeam .fuwaBox .info .posi.fg {
  color: #fff;
  padding: 0;
  text-align: left;
}
.contentArea .characterTeam .fuwaBox .info .name {
  color: #e9ff0c;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox .info .name {
    font-size: 34px;
    margin-bottom: 0.2em;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox .info .name {
    font-size: 1.6vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .fuwaBox .info .name {
    font-size: 5.6vw;
    margin-bottom: 0.1em;
  }
}
:lang(en) .contentArea .characterTeam .fuwaBox .info .name {
  line-height: 1.2;
}
.contentArea .characterTeam .fuwaBox .info .name rt {
  font-weight: 700;
  ruby-align: center;
  text-align: center;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox .info .name rt {
    font-size: 9px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox .info .name rt {
    font-size: 0.4vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .fuwaBox .info .name rt {
    font-size: 2.2vw;
  }
}
.safari .contentArea .characterTeam .fuwaBox .info .name rt {
  translate: 0 0.5em;
}
.ff .contentArea .characterTeam .fuwaBox .info .name rt {
  position: relative;
  top: 0.5em;
}
.contentArea .characterTeam .fuwaBox .info .cv {
  color: #cccccc;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .fuwaBox .info .cv {
    font-size: 16px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .fuwaBox .info .cv {
    font-size: 0.8vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .fuwaBox .info .cv {
    font-size: 3.6vw;
  }
}
.contentArea .characterTeam .naviBox {
  position: relative;
  background: -webkit-gradient(linear, left top, right top, from(#0730a7), to(#049ec9));
  background: linear-gradient(90deg, #0730a7 0%, #049ec9 100%);
  padding: 3px 0;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .naviBox {
    margin-top: -100px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .naviBox {
    margin-top: -4vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .naviBox {
    margin-top: -12vw;
  }
}
.contentArea .characterTeam .naviBox .in {
  border-top: 1px solid #5ab3d0;
  border-bottom: 1px solid #5ab3d0;
}
.contentArea .characterTeam .naviBox .in .teamNavi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .naviBox .in .teamNavi {
    gap: 40px;
    width: min(96%, 1080px);
    padding: 100px 0;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .naviBox .in .teamNavi {
    gap: 2vw;
    width: 60%;
    padding: 4vw 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .contentArea .characterTeam .naviBox .in .teamNavi {
    gap: 4vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .naviBox .in .teamNavi {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 4vw 0;
    padding: 10vw 16vw;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) .contentArea .characterTeam .naviBox .in .teamNavi {
    padding: 10vw 5vw;
  }
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li {
    width: calc((100% - 80px) / 3);
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li {
    width: calc((100% - 4vw) / 3);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li {
    width: 46%;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li {
    width: 100%;
  }
}
.contentArea .characterTeam .naviBox .in .teamNavi li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  font-weight: 700;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 0 #69a045;
          box-shadow: 0 2px 0 #69a045;
  padding: 1.5em 0;
  height: calc(100% - 3em);
  background-repeat: no-repeat;
  background-position: center left 0.6em;
  background-size: 4em;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li a {
    font-size: 18px;
  }
}
@media screen and (min-width: 1921px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li a {
    font-size: 1vw;
  }
}
@media screen and (max-width: 767px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li a {
    font-size: 3.8vw;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) .contentArea .characterTeam .naviBox .in .teamNavi li a {
    padding-left: 1em;
  }
}
.contentArea .characterTeam .naviBox .in .teamNavi li a:lang(en), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(fr), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(it), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(de), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(es), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(pt-BR), .pt-br .contentArea .characterTeam .naviBox .in .teamNavi li a {
  background-size: auto 56%;
}
@media screen and (min-width: 768px) {
  .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(en), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(fr), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(it), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(de), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(es), .contentArea .characterTeam .naviBox .in .teamNavi li a:lang(pt-BR), .pt-br .contentArea .characterTeam .naviBox .in .teamNavi li a {
    font-size: 17px;
  }
}
.contentArea .characterTeam .naviBox .in .teamNavi li a:after {
  display: block;
  content: "";
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat 0 0/100%;
  width: 1em;
  height: 1.2em;
  position: absolute;
  right: 1em;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.contentArea .characterTeam .naviBox .in .teamNavi li a:hover {
  background-color: #ffee34;
}
.contentArea .characterTeam .naviBox .in .teamNavi li.current a {
  background-color: #ffee34;
}
.contentArea .characterTeam .naviBox .in .teamNavi li.nagumohara a {
  background-image: url(../img/character/icn_nagumohara.png);
}
.contentArea .characterTeam .naviBox .in .teamNavi li.raimon a {
  background-image: url(../img/character/icn_raimon.png);
}
.contentArea .characterTeam .naviBox .in .teamNavi li.hokuyo a {
  background-image: url(../img/character/icn_hokuyo.png);
}
.contentArea .characterTeam .naviBox .in .teamNavi li.nishinomiya a {
  background-image: url(../img/character/icn_nishinomiya.png);
}
.contentArea .characterTeam .naviBox .in .teamNavi li.tofuikokukan a {
  background-image: url(../img/character/icn_tofuikokukan.png);
}
.contentArea .characterTeam .naviBox .in .teamNavi li.teikoku a {
  background-image: url(../img/character/icn_teikoku.png);
}

@media screen and (min-width: 768px) {
  #teikoku h2 .inTxt br {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  #nagumohara-select h2 .inTxt {
    font-size: 38px;
  }
}
@media screen and (max-width: 767px) {
  #nagumohara-select h2 .inTxt {
    font-size: 4.6vw;
  }
}
@media screen and (min-width: 768px) {
  #nagumohara-select h2 .inTxt:lang(en), #nagumohara-select h2 .inTxt:lang(fr), #nagumohara-select h2 .inTxt:lang(it), #nagumohara-select h2 .inTxt:lang(de), #nagumohara-select h2 .inTxt:lang(es), #nagumohara-select h2 .inTxt:lang(pt-BR), .pt-br #nagumohara-select h2 .inTxt {
    font-size: 42px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  #nagumohara-select h2 .inTxt:lang(en), #nagumohara-select h2 .inTxt:lang(fr), #nagumohara-select h2 .inTxt:lang(it), #nagumohara-select h2 .inTxt:lang(de), #nagumohara-select h2 .inTxt:lang(es), #nagumohara-select h2 .inTxt:lang(pt-BR), .pt-br #nagumohara-select h2 .inTxt {
    font-size: 30px;
  }
}
@media screen and (max-width: 767px) {
  #nagumohara-select h2 .inTxt:lang(en), #nagumohara-select h2 .inTxt:lang(fr), #nagumohara-select h2 .inTxt:lang(it), #nagumohara-select h2 .inTxt:lang(de), #nagumohara-select h2 .inTxt:lang(es), #nagumohara-select h2 .inTxt:lang(pt-BR), .pt-br #nagumohara-select h2 .inTxt {
    font-size: 4vw;
  }
}