/***********************************************************

 * top

************************************************************/
.container {
  background: #1B1A3E;
}

/*--------------------------------------*/
.main {
  z-index: 1;
  padding-top: 100px;
  padding-bottom: 40px;
  width: 100%;
  height: auto;
  background: url(../images/top/visual-pc.jpg) no-repeat top center;
  background-size: cover;
}

@media screen and (max-width: 640px) {
  .main {
    width: 100vw;
    z-index: 10;
    padding-top: 65px;
    padding-bottom: 38px;
    background: url(../images/top/visual-sp.jpg) no-repeat center top;
    background-size: cover;
  }
}

.main-sp {
  display: none;
}

@media screen and (max-width: 640px) {
  .main-pc {
    display: none;
  }

  .main-sp {
    display: block;
  }
}



/*--------------------------------------*/
.sub {
  background: linear-gradient(to bottom, rgba(68, 15, 88, 0), rgba(35, 9, 62, 0.3) 15%, rgba(19, 5, 38, 0.49) 30%, rgba(13, 7, 44, 0.79) 45%, rgba(12, 6, 39, 0.93) 60%, rgba(0, 0, 0, 1));
}

@media screen and (max-width: 640px) {
  .sub {
    background: linear-gradient(to bottom, rgba(68, 15, 88, 0), rgba(35, 9, 62, 0.3) 10%, rgba(19, 5, 38, 0.49) 20%, rgba(13, 7, 44, 0.79) 45%, rgba(12, 6, 39, 0.93) 60%, rgba(0, 0, 0, 1));
  }
}

/*--------------------------------------*/
.comments {
  width: 62%;
  max-width: 800px;
  min-width: 400px;
  margin: auto;
  padding: 100px 0 160px;
}

@media screen and (max-width: 640px) {
  .comments {
    width: 90%;
    max-width: 340px;
    min-width: 180px;
    padding: 0px 0 60px;
    margin-top: 100px;
  }
}

/*--------------------------------------*/
.story {
  width: 62%;
  max-width: 800px;
  margin: auto;
}

@media screen and (max-width: 640px) {
  .story {
    width: 90%;
    margin-bottom: 70px;
  }
}

/*--------------------------------------*/
.main>div {
  position: relative;
}

.attention {
  position: absolute;
  width: 14%;
  /* top: 47vw; */
  bottom: 3%;
  right: 2vw;
  animation: purupuru_anim 3s infinite;
}

@keyframes purupuru_anim {
  0% {
    transform: translate(0, 0);
  }

  5% {
    transform: translate(-5px, -0);
  }

  8% {
    transform: translate(5px, 0);
  }

  11% {
    transform: translate(-5px, -0);
  }

  14% {
    transform: translate(5px, 0);
  }

  17% {
    transform: translate(-5px, -0);
  }

  20% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

._sns {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 2vw;
  right: 2vw;
}

._sns li {
  font-size: 2vw;
  line-height: 1;
  list-style-type: none;
}

._sns li a {
  color: #ADA6CD;
  transition: all .5s;
  border: solid 1px #ADA6CD;
  border-radius: 50%;
  width: 3.5vw;
  height: 3.5vw;
  max-width: 50px;
  max-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

._sns li a:hover {
  color: #fff;
  background: #ADA6CD;
  border: #fff solid 1px;
}

.twitter-icon {
  margin-right: 15px;
}

.twitter_icon {
  margin-top: 2px;
}

.berlin{
  width: 33%;
  max-width: 450px;
  left: 10%;
}

._copy{
  position: absolute;
  width: 23%;
  top: 34px;
  left: 48%;
}

._logo {
  position: relative;
	width: 44%;
  margin-top: -20px;
  top: 0;
  left: 30px;
}

._roadshow {
  position: relative;
  width: 17.7%;
  top: 0;
  left: 15%;
  margin-top: -36px;
}

._catch {
  position: absolute;
  width: 1.7%;
  top: 12.8%;
  right: 5%;
}

._credit {
  position: relative;
  width: 35%;
  margin-top: 55px;
  top: 0;
  left: 6%;
}

.bnr-all{
  display: flex;
  align-items: center;
  position: relative;
  left: 4%;
  margin-top: 50px;
}
.kansou{
}
.kansou img{
  width: auto;
  height: 5.8vw;
}
.bnr-release{
}
.bnr-release img{
  width: auto;
  height: 5.8vw;
}
.bnr-relay{
}
.bnr-relay img{
  height: 5.8vw;
  width: auto;
}
.bnr-daihit{
}
.bnr-daihit img{
  height: 5.8vw;
  width: auto;
}
.bnr-audio{
}
.bnr-audio img{
  height: 5.8vw;
  width: auto;
}
.bnr-view{
  margin-left: 0.7vw;
}
.bnr-view img{
  height: 5.8vw;
  width: auto;
}
.bnr-dvd{
  margin-left: 0.7vw;
}
.bnr-dvd img{
  height: 5.8vw;
  width: auto;
}

@media screen and (max-width: 640px) {

  .attention {
    position: absolute;
    width: 27%;
    top: 565px;
    bottom: auto;
    right: 3vw;
  }

  @keyframes purupuru_anim {
    0% {
      transform: translate(0, 0) rotate(7deg);
    }

    5% {
      transform: translate(-5px, -0) rotate(7deg);
    }

    8% {
      transform: translate(5px, 0) rotate(7deg);
    }

    11% {
      transform: translate(-5px, -0) rotate(7deg);
    }

    14% {
      transform: translate(5px, 0) rotate(7deg);
    }

    17% {
      transform: translate(-5px, -0) rotate(7deg);
    }

    20% {
      transform: translate(0, 0) rotate(7deg);
    }

    100% {
      transform: translate(0, 0) rotate(7deg);
    }
  }

  ._sns {
    position: absolute;
    top: 6vw;
    right: 4vw;
  }

  ._sns li {
    font-size: 6vw;
  }

  ._sns li a {
    width: 9vw;
    height: 9vw;
  }

  .twitter-icon {
    margin-right: 12px;
  }

  ._copy{
    position: relative;
    width: 83%;
    top: 0;
    left: 0;
    margin: 70px auto 0;
  }

  ._logo{
    width: 94%;
    transform: rotate(-9deg) translateX(-50%);
    left: 50%;
    margin-top: 330px;
  }
  .berlin{
    width: 58%;
    max-width: 220px;
    top: 0;
    left: 6px;
  }
  ._roadshow {
    margin-top: 27px;
    width: 55%;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
  }

  ._catch {
    margin-top: 0;
    width: 15px;
    top: 14vh;
  }

  ._credit {
    margin-top: 42px;
    margin-bottom: 37px;
    width: 90%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .bnr-all{
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .kansou{
    width: 90%;
    margin: 0 auto;
  }
  .kansou img{
    width: 100%;
    height: auto;
  }
  .bnr-release{
    width: 90%;
    margin: 0 auto;
  }
  .bnr-release img{
    width: 100%;
    height: auto;
  }
  .bnr-daihit{
    width: 90%;
    margin: 18px auto 18px;
  }
  .bnr-daihit img{
    width: 100%;
    height: auto;
  }
  .bnr-relay{
    width: 70%;
    margin: 18px auto 18px;
  }
  .bnr-relay img{
    width: 100%;
    height: auto;
  }
  .bnr-audio{
    width: 90%;
    margin: 18px auto 18px;
  }
  .bnr-audio img{
    width: 100%;
    height: auto;
  }
  .bnr-view{
    width: 70%;
    margin: 18px auto 18px;
  }
  .bnr-view img{
    width: 100%;
    height: auto;
  }
  .bnr-dvd{
    width: 90%;
    margin: 18px auto 18px;
  }
  .bnr-dvd img{
    width: 100%;
    height: auto;
  }

}

.btn-wrap {
  padding: 60px 0 145px;
  width: 70%;
  min-width: 700px;
  margin: 0 auto;
}

.btn-wrap a {
  display: block;
}

.about-btn {
  position: relative;
  width: 70%;
  margin: 0 auto 24px;
}

.about-btn a:hover .-hover {
  opacity: 100%;
}

.btn-list {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 85%;
  margin: 0 auto;
}

.trailer-btn {
  position: relative;
  width: 25%;
}

.-hover {
  position: absolute;
  opacity: 0;
  top: 0;
}

.trailer-btn a:hover .-hover {
  opacity: 100%;
}

.comment-btn {
  position: relative;
  width: 25%;
}

.comment-btn a:hover .-hover {
  opacity: 100%;
}

.news-btn {
  position: relative;
  width: 25%;
}

.soon {
  position: absolute;
  width: 57%;
  top: -17%;
  left: 10px;
  z-index: 9;
}

.news-btn a {
}

.news-btn a:hover .-hover {
  opacity: 100%;
}

.theater-btn {
  position: relative;
  width: 25%;
}

.theater-btn a:hover .-hover {
  opacity: 100%;
}

@media screen and (max-width: 640px) {
  .btn-wrap {
    padding: 43px 0;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }

  .about-btn {
    position: relative;
    width: 250px;
    margin: 0 auto 20px;
  }

  .btn-list {
    margin-top: 0;
    top: 0;
    height: auto;
    width: 250px;
    flex-direction: column;
    margin: 0 auto;
  }

  .trailer-btn {
    width: 100%;
    margin: 0 auto;
  }

  .comment-btn {
    width: 100%;
    margin: 0 auto;
  }

  .news-btn {
    width: 100%;
    margin: 0 auto;
  }

  .theater-btn {
    width: 100%;
    margin: 0 auto;
  }
}

.shadow {
  filter: drop-shadow(1px 1px 1px rgba(2, 4, 25, 0.4));
}

.bnr {
  width: 20%;
  min-width: 270px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .bnr {
    width: 90%;
    margin: 36px auto;
  }
}

/*--------------------------------------*/
.scrolldown {
  margin-top: 8vw;
  max-width: 800px;
  position: relative;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.1em;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(-50%, 0);
  text-decoration: none;
  padding-top: 60px;
}

@media screen and (max-width: 640px) {
  .scrolldown {
    transform: translate(-50%, 0%);
  }
}

.scroll-span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

@media screen and (max-width: 640px) {
  .scrolldown {
    margin-top: 0px;
  }
}


/*--------------------------------------*/
.comments {
  font-family: 'Noto Sans JP', sans-serif;
}

.comments-title {
  width: 43%;
  margin: 0 auto 94px;
}

._nakajima {
  width: 100%;
  color: #fff;
  text-align: left;
  margin-bottom: 70px;
}

._nao {
  width: 100%;
  color: #fff;
  text-align: left;
  margin-bottom: 70px;
}

._nagayama {
  width: 100%;
  color: #fff;
  text-align: left;
  margin-bottom: 70px;
}

._kumagiri {
  width: 100%;
  color: #fff;
  text-align: left;
  margin-bottom: 70px;
}

._name {
  font-size: 24px;
  padding-left: 5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.post {
  font-size: 18px;
}

._comment {
  font-size: 15px;
  font-weight: 400;
  margin: 10px 0 20px;
}

.profile-title {
  font-weight: 600;
}

._profile {
  font-size: 13px;
  font-weight: 400;
  border: 1px #fff solid;
  padding: 30px 60px;
}

._okada {
  width: 100%;
  color: #fff;
  text-align: left;
}

@media screen and (max-width: 640px) {
  .comments {
    font-family: 'Noto Sans JP', sans-serif;
  }

  .comments-title {
    font-size: 44px;
    margin-bottom: 60px;
  }

  ._kumagiri {
    margin-bottom: 50px;
  }

  ._name {
    font-size: 18px;
    padding-left: 0;
  }

  .post {
    font-size: 15px;
  }

  ._profile {
    padding: 30px 18px;
  }

}