@charset "UTF-8";

/* =================================
   MAIN
================================= */
.header-video {
  background: url(../images/top/movie.png) no-repeat center top;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -398px;
  z-index: 0;
  overflow: hidden;
  min-width: 800px;
  height: 800px;
}
.header-video video {
}
.header-mask {
  position: absolute;
  background: url(../images/top/mask.png) no-repeat center top;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 800px;
}

.line {
  position: absolute;
  background: url(../images/top/line.png) repeat-x center center;
  text-align: center;
  top: 761px;
  z-index: 2;
  width: 100%;
}

/*.line::before {
  position: absolute;
  content:"";
  background: url(../images/top/line_left.png) no-repeat;
  text-align: center;
  top: 0;
  left: 0;
  width: 40px;
  height: 56px;
}
.line::after {
  position: absolute;
  content:"";
  background: url(../images/top/line_right.png) no-repeat;
  text-align: center;
  top: 0;
  right: 0;
  width: 41px;
  height: 55px;
}*/

.main .info {
  position: absolute;
  left: 0;
  top: 10%;
  right: 0;
  z-index: 10;
  width: 500px;
  margin: auto;
}
.main .info .info-box {
  width: 500px;
  height: 300px;
  padding: 2%;
  margin: auto;
  background-color: rgb(0, 0, 0, 0.7);
  color: white;
  overflow-x: scroll;
  border-radius: 10px;
  text-align: left;
  font-size: 1.9rem;
}
.main .info .info-box p {
  padding: 3% 0;
}

@media screen and (min-width: 751px) {
  .main {
    position: relative;
    width: 100%;
    height: 819px;
    z-index: 3;
  }
  .main-block {
    width: 1166px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -584px;
  }
  .main h1 {
    position: absolute;
    top: 262px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
  }
  .main .release {
    display: block;
    position: absolute;
    top: 632px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
  }
  .main .release img {
    width: 260px;
    height: auto;
  }
  .main .chara-1 {
    position: absolute;
    top: 472px;
    left: 50%;
    margin-left: -516px;
  }
  .main .chara-2 {
    position: absolute;
    top: 303px;
    left: 50%;
    margin-left: -571px;
  }
  .main .chara-3 {
    position: absolute;
    top: 99px;
    left: 50%;
    margin-left: -498px;
  }
  .main .chara-4 {
    position: absolute;
    top: 508px;
    left: 50%;
    margin-left: 125px;
  }
  .main .chara-5 {
    position: absolute;
    top: 354px;
    left: 50%;
    margin-left: 262px;
  }
  .main .chara-6 {
    position: absolute;
    top: 184px;
    left: 50%;
    margin-left: 198px;
  }
  .main #pc-btn-pre {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: 263px;
    z-index: 2;
  }
}
@media screen and (max-width: 750px) {
  .main {
    position: relative;
    width: 750px;
    height: 819px;
    z-index: 3;
  }
  .main-block {
    width: 750px;
    height: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .main h1 {
    position: absolute;
    top: 253px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
  }
  .main .release {
    display: block;
    position: absolute;
    top: 632px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
  }
  .main .chara-1 {
    position: absolute;
    top: 493px;
    left: 50%;
    margin-left: -458px;
  }
  .main .chara-2 {
    position: absolute;
    top: 180px;
    left: 50%;
    margin-left: -438px;
  }
  .main .chara-3 {
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -429px;
  }
  .main .chara-4 {
    position: absolute;
    top: 537px;
    left: 50%;
    margin-left: 93px;
  }
  .main .chara-5 {
    position: absolute;
    top: 207px;
    left: 50%;
    margin-left: 144px;
  }
  .main .chara-6 {
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: 200px;
  }
  .main #sp-btn-pre {
    position: absolute;
    bottom: -215px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 1100;
  }

  #container {
    padding: 309px 0 0 0;
  }

  .btn-list li img {
    width: 232px;
    height: auto;
  }
}

/* =================================
   CONTAINER
================================= */
#container {
  text-align: center;
  position: relative;
}
/* TWITTER TIMELINE */
.tw-area {
  background: url(../images/top/bg_tw_timeline.png) no-repeat center 0;
  text-align: center;
  height: 637px;
  margin: 0 auto 78px;
}

.timeline {
  padding: 240px 40px 0 0;
  text-align: center;
}
/* PRE-REGIST */
#resist {
  background: #fde9b3 url(../images/shared/bg_container.png);
  padding-bottom: 100px;
}
.resist-area {
  background: url(../images/top/bg_resist_area.png) no-repeat center 0;
  background-size: cover;
  padding-top: 60px;
  overflow: hidden;
}
.slider-item {
  background: url(../images/top/slide_item.png) no-repeat center 0;
  width: 100%;
  height: 637px;
}
.slider {
  width: 100%;
  padding: 0;
  margin: 27px auto 0;
}
.btn-list {
  text-align: center;
  font-size: 0;
  margin: 63px 0 120px;
  position: relative;
  z-index: 2;
}
.btn-list li {
  display: inline-block;
  margin: 0 5px;
}

/* NEWS TIMELINE */
.news-timeline-area {
  background: url(../images/top/bg_news.png) no-repeat center 0;
  background-size: cover;
  text-align: center;
  padding: 40px 0;
  margin: 0 auto;
}
.news-timeline {
  background: url(../images/top/bg_news_timeline.png) no-repeat center 0;
  height: 637px;
  margin-bottom: 20px;
}
.news-timeline__body {
  position: relative;
  top: 248px;
  left: -10px;
  width: 530px;
  height: 333px;
  margin: 0 auto;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
}
.news-timeline__item {
  cursor: pointer;
  padding-bottom: 20px;
  padding-right: 87px;
  border-bottom: 2px solid #9b1715;
  margin-bottom: 20px;
  margin-right: 20px;
  background-image: url("../images/top/news_arrow.png");
  background-position: 100% 50%;
  background-repeat: no-repeat;
}
.news-timeline__item__date {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #9b1715;
}
.news-timeline__item__title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* RELEASE */
#release {
  background: #fde9b3 url(../images/shared/bg_container.png);
  padding-bottom: 260px;
}
.release-area {
  background: url(../images/top/bg_resist_area.png) no-repeat center 0;
  background-size: cover;
  padding-top: 100px;
  overflow: hidden;
}
.release__wrapper {
  height: 777px;
  background: url(../images/top/release_bg.png) no-repeat center 0;
  background-repeat: no-repeat;
  background-position: 50% 0;
}
.release__title {
  position: relative;
  top: -40px;
  left: -20px;
  margin-bottom: 170px;
}
.release__text {
  position: relative;
  left: -20px;
  margin-bottom: 30px;
}
.release__downloads {
  position: relative;
  left: -20px;
  font-size: 0;
}
.release__downlods_btn {
  display: inline-block;
  font-size: 12px;
  margin: 0 8px;
}

@media screen and (max-width: 750px) {
  #release {
    padding-bottom: 80px;
  }
}

/* =================================
   POPUP
================================= */

#form,
#thanks,
#twitterform {
  background: url(../images/shared/bg_page.png);
  min-width: 750px;
  margin: 0 auto;
  height: 100%;
}

#form #popup,
#thanks .thanks_block,
#twitterform #popup {
  background: url(../images/top/bg_base.png) no-repeat;
  width: 709px;
  height: 595px;
  padding: 22px 23px;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#form p,
#twitterform p {
  margin: 30px auto 0;
}
#thanks p {
  margin: 50px auto 0;
}

#thanks p.btn {
  margin: 58px auto 25px;
}

#form iframe,
#twitterform iframe {
  background: #fff;
  border: 3px solid #9b1715;
  margin: 22px auto;
  height: 280px;
}

#thanks .thanks_block div {
  background: #fff;
  border: 3px solid #9b1715;
  margin: 22px auto;
}

/* =================================
   NEWS
================================= */
.news {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.5);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 99999;
}
.news__title {
  margin-top: 86px;
  margin-bottom: calc(14px + 64px);
  text-align: center;
}
.news__close {
  position: fixed;
  cursor: pointer;
  top: 35px;
  right: 16px;
  z-index: 10;
}
.news-article {
  position: relative;
  width: 717px;
  margin: 0 auto;
  margin-bottom: calc(30px + 64px);
  padding-bottom: 56px;
  background-image: url("../images/news/news_footer.png");
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.news-article::before {
  display: block;
  position: absolute;
  top: -64px;
  left: 0;
  width: 100%;
  height: 64px;
  background-image: url("../images/news/news_header.png");
  background-repeat: no-repeat;
  content: "";
}
.news-article__main {
  padding: 60px;
  padding-top: 0px;
  padding-bottom: 20px;
  background-image: url("../images/news/news_body.png");
  background-repeat: repeat-y;
}
.news-article__date {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #9b1715;
}
.news-article__title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding-bottom: 20px;
  border-bottom: 2px solid #9b1715;
  margin-bottom: 20px;
}
.news-article__body {
  font-size: 20px;
}
.news-article__body p,
.news-article__body ul,
.news-article__body dl {
  margin-bottom: 1em;
}
.news-article__body img {
  max-width: 100%;
  height: auto !important;
}
.news-article__body a {
  color: #9b1715;
  text-decoration: underline;
}
.news-article__body a img {
  text-decoration: none;
}