.top-mv {
  position: relative;
  background-color: #172244;
  overflow: hidden;
}

.top-mv img {
  width: 100%;
}

.top-mv h1 {
  position: absolute;
  top: 42.45283%;
  left: 0;
  right: 0;
  margin: auto;
  width: 34.75%;
}

.top-mv .top_link {
  position: absolute;
  top: 7%;
  left: 0;
  right: -84%;
  margin: auto;
  width: 16%;
}

.top-mv-copy {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 16.98113%;
  width: 25%;
}

.top-news {
  background-image: url(../../img/top/news_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 0 0 80px;
}

.top-news-bnr {
  background-image: url(../../img/top/news_bnr_bg.png);
  background-size: 100% 100%;
  margin: 60px 0 120px;
  padding: 40px 0;
}

.top-news-bnr ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 750px;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.top-news h2 {
  text-align: center;
  margin: 0 auto 50px;
}

.top-news-btn {
  text-align: center;
  margin: 50px auto 0;
}

.top-chara {
  padding: 110px 0 50px;
}

.top-chara h2 {
  margin: 0 auto;
  text-align: center;
}

.top-chara-list-pc {
  margin-top: 40px;
}

.top-chara-list-pc>div {
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 34.6875%;
  background-position: center bottom;
}

.top-chara-list-pc>div:nth-of-type(1) {
  background-image: url(../../img/top/chara_bg_01.jpg);
}

.top-chara-list-pc>div:nth-of-type(2) {
  background-image: url(../../img/top/chara_bg_02.jpg);
}

.top-chara-list-pc>div:nth-of-type(3) {
  background-image: url(../../img/top/chara_bg_03.jpg);
}

.top-chara-list-pc>div:nth-of-type(4) {
  background-image: url(../../img/top/chara_bg_04.jpg);
}

.top-chara-list-pc>div:nth-of-type(5) {
  background-image: url(../../img/top/chara_bg_05.jpg);
}

.top-chara-list-pc-pic {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.top-chara-list-pc-pic>li {
  position: absolute;
  bottom: 1px;
}

.top-chara-list-pc-pic>li:nth-of-type(1) {
  z-index: 4;
}

.top-chara-list-pc-pic>li:nth-of-type(2) {
  z-index: 3;
}

.top-chara-list-pc-pic>li:nth-of-type(3) {
  z-index: 2;
}

.top-chara-list-pc-pic>li:nth-of-type(4) {
  z-index: 1;
}

.top-chara-list-pc-pic>li>img {
  width: 100%;
}

.top-chara-list-pc-pic01 {
  width: 29.1875%;
  left: 5.3125%;
}

.top-chara-list-pc-pic02 {
  width: 27.25%;
  left: 25.625%;
}

.top-chara-list-pc-pic03 {
  width: 25.9375%;
  left: 49.375%;
}

.top-chara-list-pc-pic04 {
  width: 22.4375%;
  left: 71.5625%;
}

.top-chara-list-pc-pic11 {
  width: 33.75%;
  left: 6.25%;
}

.top-chara-list-pc-pic12 {
  width: 33.75%;
  left: 23.125%;
}

.top-chara-list-pc-pic13 {
  width: 31.6875%;
  left: 43.75%;
}

.top-chara-list-pc-pic14 {
  width: 28.125%;
  left: 65.625%;
}

.top-chara-list-pc-pic21 {
  width: 19.25%;
  left: 30%;
}

.top-chara-list-pc-pic22 {
  width: 22.125%;
  left: 53.4375%;
}

.top-chara-list-pc-pic31 {
  width: 32%;
  left: 37%;
}

.top-chara-list-pc-pic32 {
  width: 27%;
  left: 16%;
}

.top-chara-list-pc-pic33 {
  width: 32%;
  left: 60%;
}

.top-chara-list-pc-pic34 {
  width: 26%;
  left: 40%;
}

.top-chara-list-pc-pic35 {
  width: 25%;
  left: 18%;
}

.top-chara-list-pc-pic36 {
  width: 29%;
  left: 64%;
}

.top-chara-list-pc-btn {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -20px;
  z-index: 5;
}

.top-chara-list-pc-btn2 {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -20px;
  z-index: 5;
}

.top-chara-list-pc-btn>li {
  position: absolute;
  bottom: 0;
}

.top-chara-list-pc-btn>li:nth-of-type(1) {
  left: 14.75%;
}

.top-chara-list-pc-btn>li:nth-of-type(2) {
  left: 35.9375%;
}

.top-chara-list-pc-btn>li:nth-of-type(3) {
  left: 57.8125%;
}

.top-chara-list-pc-btn>li:nth-of-type(4) {
  left: 77.1875%;
}

.top-chara-list-pc-btn2>li {
  position: absolute;
  bottom: 0;
}

.top-chara-list-pc-btn2>li:nth-of-type(1) {
  left: 25%;
}

.top-chara-list-pc-btn2>li:nth-of-type(2) {
  left: 48%;
}

.top-chara-list-pc-btn2>li:nth-of-type(3) {
  left: 71%;
}

.top-chara-list-sp {
  margin-top: 30px;
}

.top-chara-list-sp>div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.top-chara-list-sp>div:nth-of-type(1) {
  background-image: url(../../img/top/chara_bg_01_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(2) {
  background-image: url(../../img/top/chara_bg_02_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(3) {
  background-image: url(../../img/top/chara_bg_01_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(4) {
  background-image: url(../../img/top/chara_bg_02_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(5) {
  background-image: url(../../img/top/chara_bg_03_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(6) {
  background-image: url(../../img/top/chara_bg_09_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(7) {
  background-image: url(../../img/top/chara_bg_09_sp.jpg);
}

.top-chara-list-sp>div:nth-of-type(8) {
  background-image: url(../../img/top/chara_bg_09_sp.jpg);
}

.top-chara-list-sp>div:last-of-type {
  background-image: url(../../img/top/chara_bg_09_sp.jpg);
}

.top-chara-list-sp>div>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.top-chara-list-sp>div>ul>li {
  width: 50%;
  position: relative;
}

.top-chara-list-sp>div>ul>#list-index {
  width: 50%;
  position: relative;
  z-index: 1;
}

.top-chara-list-sp>div>ul>li>a {
  display: block;
  padding-bottom: 1px;
}

.top-chara-list-sp>div>ul>li>a>div {
  position: absolute;
  width: 85px;
  left: 0;
  right: 0;
  bottom: -10px;
  margin: auto;
}

.top-story {
  padding: 120px 0 90px;
  background-image: url(../../img/top/story_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-align: center;
}

.top-story h2 {
  margin: 0 auto;
}

.top-story-text-top {
  margin-top: 10px;
}

.top-story-text-bottom {
  margin-top: 180px;
}

.top-story-btn {
  margin: 20px auto 0;
}

.top-music {
  padding: 100px 0 80px;
  background-image: url(../../img/top/music_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-align: center;
}

.top-music h2 {
  margin: 0 auto;
}

.top-music-name {
  margin: 30px auto 0;
}

.top-music-name2 {
  margin: 40px auto 0;
}

.top-music-pic {
  margin-top: 20px;
}

.top-music-text {
  margin: 40px auto 0;
}

.top-music-btn {
  margin: 30px auto 0;
}

.top-movie h2 {
  position: absolute;
  top: 6.25%;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  margin: auto;
}

.top-movie-play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
}

.top-movie-play>a {
  display: block;
}

.top-movie-play>a:hover {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.top-movie-btn {
  position: absolute;
  width: 240px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 4.375%;
}

.top-movie-area {
  background-color: #172244;
  padding-top: 56.25%;
  position: relative;
}

.top-movie-area:after {
  content: "";
  position: absolute;
  background-image: url(../../img/top/movie_mask.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top-movie-area>video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.top-interview {
  padding: 100px 0 80px;
  background-image: url(../../img/top/music_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-align: center;
}

.top-interview h2 {
  margin: 0 auto;
}

.top-interview-pic {
  margin-top: 20px;
}

.top-interview-text {
  margin: 20px auto 0;
}

.top-interview-btn {
  margin: 50px auto 0;
}

.top-system {
  padding: 100px 0 140px;
  background-image: url(../../img/top/system_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-align: center;
}

.top-system h2 {
  margin: 0 auto;
}

.top-system-copy {
  margin: 20px auto 0;
}

.top-system-pic {
  position: relative;
}

.top-system-pic>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.top-system-pic>ul>li {
  margin: 0 10px;
}

.top-system-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top-system-arrow-prev {
  left: 0;
}

.top-system-arrow-next {
  right: 0;
}

.top-system-arrow>ul>li {
  position: absolute;
  width: 45px;
  height: 45px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.top-system-text {
  margin: 40px auto 0;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.1em;
  font-size: 1.7rem;
  line-height: 2;
}

.top-info-spec {
  padding-top: 120px;
  margin-bottom: 50px;
}

.top-info-spec>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
}

.top-info-spec>ul>li {
  /* width: 48%; */
  width: fit-content;
}

.top-info-spec-tweet {
  position: relative;
}

.top-info-spec-tweet>iframe {
  height: 320px !important;
}

.top-info-spec-detail h2 {
  margin-bottom: 30px;
  text-align: center;
}

.top-info-spec-detail>ul>li {
  color: #192f60;
  font-size: 1.6rem;
  line-height: 2;
}

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

#nav .nav-menu {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .top-mv .top_link {
    top: 10%;
    right: -70%;
    width: 30%;
  }

  .top-mv h1 {
    top: 43.36283%;
    width: 64%;
  }

  .top-mv-copy {
    bottom: 4.42478%;
    width: 74.66667%;
  }

  .top-news {
    padding: 0 0 40px;
  }

  .top-news .nav-menu {
    padding-top: 40px;
  }

  .top-news-bnr {
    margin: 30px 0 60px;
    padding: 20px;
  }

  .top-news-bnr ul>li:nth-of-type(n+2) {
    margin-top: 20px;
  }

  .top-news h2 {
    margin-bottom: 25px;
    width: 86.95652%;
  }

  .top-news-btn {
    margin-top: 30px;
    width: 44.92754%;
  }

  .top-chara {
    padding: 60px 0 40px;
  }

  .top-chara h2 {
    width: 80%;
  }

  .top-story {
    padding: 50px 0 40px;
    background-image: url(../../img/top/story_bg_sp.jpg);
  }

  .top-story h2 {
    width: 86.95652%;
  }

  .top-story-text-bottom {
    margin-top: 100px;
  }

  .top-story-btn {
    margin-top: 10px;
    width: 44.92754%;
  }

  .top-music {
    padding: 50px 0 40px;
  }

  .top-music h2 {
    width: 86.95652%;
  }

  .top-music-name {
    margin-top: 20px;
    width: 57.97101%;
  }

  .top-music-name2 {
    margin-top: 40px;
    width: 35%;
  }

  .top-music-text {
    margin-top: 10px;
    width: 72.46377%;
  }

  .top-music-btn {
    margin-top: 20px;
    width: 44.92754%;
  }

  .top-movie h2 {
    display: none;
  }

  .top-movie-play {
    width: 60px;
    height: 60px;
  }

  .top-movie-btn {
    width: 32%;
    bottom: 5.33333%;
  }

  .top-movie-area:after {
    background-image: url(../../img/top/movie_mask_sp.png);
  }

  .top-interview {
    padding: 45px 0;
  }

  .top-interview h2 {
    width: 86.95652%;
  }

  .top-interview-text {
    margin-top: 30px;
    width: 65.21739%;
  }

  .top-interview-btn {
    margin-top: 20px;
    width: 44.92754%;
  }

  .top-system {
    padding: 50px 0 40px;
  }

  .top-system h2 {
    width: 86.95652%;
  }

  .top-system-copy {
    margin-top: 15px;
    width: 94.2029%;
  }

  .top-system-pic>ul {
    display: block;
    width: 70%;
    margin: 0 auto;
  }

  .top-system-pic>ul>li {
    opacity: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  .top-system-pic>ul>li.slide-in {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: 1.0s;
    transition: 1.0s;
    opacity: 1;
  }

  .top-system-text {
    margin-top: 20px;
    font-size: min(3.2vw, 1.3rem);
  }

  .top-info-spec {
    padding-top: 70px;
    margin-bottom: 20px;
  }

  .top-info-spec>ul {
    display: block;
  }

  .top-info-spec>ul>li {
    /* width: 100%; */
    margin: 0 auto;
  }

  .top-info-spec-detail {
    margin-top: 25px;
  }

  .top-info-spec-detail h2 {
    margin-bottom: 10px;
    width: 110px;
  }

  .top-info-spec-detail>ul>li {
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 768px) {
  .top-news-bnr ul>li {
    margin: 0 9px;
  }

  .top-news-bnr ul>li:nth-of-type(n+3) {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 780px) {
  .twitter-wrap {
    overflow: hidden;
  }

  .twitter-wrap iframe {
    width: calc(100vw - 20px) !important;
  }
}