.chara-nav {
  padding: 40px 0 90px;
}

.chara-nav-list {
  margin-top: 50px;
}

.chara-nav-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 30px 0;
}

.chara-nav-list ul>li {
  width: 9%;
}

.chara-nav-list ul>li>a {
  position: relative;
  display: block;
}

.chara-nav-list ul>li>a>img {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.chara-nav-list ul>li>a>img:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.chara-nav-list ul>li>a.on>img:nth-of-type(2) {
  opacity: 1;
}

.chara-detail-name>ul {
  position: relative;
  padding-top: 16.625%;
}

.chara-detail-name>ul>li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.chara-detail-name>ul>li.on {
  opacity: 1;
}

.chara-detail-name>ul>li>img {
  width: 100%;
}

.chara-detail-body {
  position: relative;
  background-image: url(../../img/chara/detail_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding-top: 48.125%;
}

.chara-detail-body img {
  width: 100%;
}

.chara-detail-particle {
  width: 50.75%;
  position: absolute;
  top: -25.97403%;
  right: 3.75%;
}

.chara-detail-pic {
  width: 32.7%;
  position: absolute;
  bottom: 10.38961%;
  right: 17.5%;
  margin-right: -10px;
  opacity: 0;
}

.chara-detail-pic.on {
  margin-right: 0px;
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.chara-detail-word {
  width: 37.625%;
  position: absolute;
  top: 5.19481%;
  left: 18.75%;
  margin-left: -10px;
  opacity: 0;
}

.chara-detail-word.on {
  margin-left: 0px;
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.chara-detail-profile {
  width: 37.625%;
  position: absolute;
  top: 38.96104%;
  left: 20.625%;
  margin-left: -10px;
  opacity: 0;
}

.chara-detail-profile.on {
  margin-left: 0px;
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.chara-detail-voice {
  position: absolute;
  left: 21.875%;
  top: 74.02597%;
  width: 30%;
  padding-top: 9%;
  background-image: url(../../img/chara/detail_line.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  margin-top: 10px;
  opacity: 0;
}

.chara-detail-voice.on {
  margin-top: 0px;
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.chara-detail-voice>div {
  position: absolute;
}

.chara-detail-voice-title {
  top: 40%;
  left: 0;
  width: 15.41667%;
}

.chara-detail-voice-play01,
.chara-detail-voice-play02 {
  top: 32%;
  width: 10.41667%;
}

.chara-detail-voice-play01 {
  left: 16.25%;
}

.chara-detail-voice-play02 {
  left: 27.70833%;
}

.chara-detail-voice-intro-title {
  top: 35%;
  right: 36.45833%;
  width: 21.04167%;
}

.chara-detail-voice-intro-play01,
.chara-detail-voice-intro-play02 {
  top: 25%;
  width: 15.625%;
}

.chara-detail-voice-intro-play01:after,
.chara-detail-voice-intro-play02:after {
  content: "";
  display: block;
  width: 35%;
  height: 35%;
  position: absolute;
  right: -3px;
  bottom: -3px;
  background-image: url(../../img/common/icon_voice.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.chara-detail-voice-intro-play01 {
  right: 17.70833%;
}

.chara-detail-voice-intro-play02 {
  right: 0;
}

.chara-detail-arrow-prev,
.chara-detail-arrow-next {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.chara-detail-arrow-prev:hover,
.chara-detail-arrow-next:hover {
  opacity: 0.8;
}

.chara-detail-arrow-prev {
  left: 15.625%;
}

.chara-detail-arrow-next {
  right: 15.625%;
}

.chara-detail-card {
  margin: 100px auto 0;
  max-width: 1600px;
}

.chara-detail-cv {
  margin: 110px auto 0;
  text-align: center;
}

.chara-detail-diagram {
  margin: 30px auto 0;
  text-align: center;
}

.chara-diagram-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2000;
  display: none;
}

.chara-diagram-modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
  cursor: pointer;
}

.chara-diagram-modal-touch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.chara-diagram-modal-contents {
  position: absolute;
  width: 60%;
}

.chara-diagram-modal-close {
  width: 180px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
}

#nav .bg-deco-head {
  background-image: none;
}

@media screen and (max-width: 767px) {
  .chara-nav {
    padding: 20px 0 40px;
  }

  .chara-nav-list {
    margin-top: 20px;
  }

  .chara-nav-list ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 0;
  }

  .chara-nav-list ul>li {
    width: 18%;
  }

  .chara-nav-list ul>li:nth-of-type(n+6) {
    margin-top: 4%;
  }

  .chara-nav-list ul>li:last-child {
    margin-right: 41%;
  }

  .chara-detail-name>ul {
    padding-top: 127.86667%;
  }

  .chara-detail-body {
    margin-top: -31.2%;
    background-image: url(../../img/chara/detail_bg_sp.jpg);
    padding-top: 119.33333%;
  }

  .chara-detail-pic {
    width: 63.2%;
    right: -5%;
    bottom: 58.10056%;
  }

  .chara-detail-word {
    left: 0;
    width: 100%;
    top: 4.46927%;
  }

  .chara-detail-profile {
    left: 0;
    width: 100%;
    top: 33.51955%;
  }

  .chara-detail-voice {
    width: 94.66667%;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 30%;
  }

  .chara-detail-arrow-prev,
  .chara-detail-arrow-next {
    width: 32px;
    bottom: auto;
    top: -30%;
  }

  .chara-detail-arrow-prev {
    left: 10px;
  }

  .chara-detail-arrow-next {
    right: 10px;
  }

  .chara-detail-card {
    margin-top: 40px;
  }

  .chara-detail-cv {
    margin-top: 50px;
    padding: 0 80px;
  }

  .chara-detail-diagram {
    margin: 20px 0 -30px;
    padding: 0 80px;
  }

  .chara-diagram-modal-contents {
    width: 300px;
  }
}

@media screen and (min-width: 768px) {
  .chara-diagram-modal-contents {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .chara-diagram-modal-contents>img {
    width: 100%;
  }
}

/* img[src="../../img/chara/gilbert_card.jpg"] {
    display: none;
}
img[src="../../img/chara/keith_card.jpg"] {
    display: none;
}
img[src="../../img/chara/silvio_card.jpg"] {
    display: none;
} */

a[href="/title/prince/original/news/interview12.html"] {
  display: none;
}

a[href="/title/prince/original/news/interview13.html"] {
  display: none;
}