@charset "UTF-8";
.mv{

}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .mv{
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .mv{
    margin-top:-5px;
}
}


.text-align-center{
    text-align:center;
}

.top-info{
  z-index: 10;
  margin-bottom: 10%;
}
.top-info p{
    margin: 5px auto;
    border:3px solid #ffef35;
    background:#fffcd3;
    text-align:center;
}
.top-info p a{
    display:block;
    width:100%;
    color:#ff0000;
  text-decoration:none;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
.top-info p{
   max-width:1000px;
}
.top-info p a{
    font-size:150%;
    padding:10px;
}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
.top-info p{
    width:90%;
}
.top-info p a{
    font-size:90%;
    padding:5px;
}
}


@media screen and ( min-width:640px ) { /* PC ==================== */
  h2.title{
    width:30%;
    margin:2% auto;
}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  h2.title{
    width:50%;
    margin:2% auto;
}
}
.infomation div{
  width:80%;
  margin:0 auto;
  padding:20px;
  background-color: #fff;
  border-radius: 20px;
}
.infomation a{
  display: block;
  border-bottom: 1px solid #333;
  padding:10px 0;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .infomation dl{
  font-size: 150%;
}
.infomation dl dt{
  width:10%;
  float: left;
}
.infomation dl dd{
  width:90%;
  float: left;
}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .infomation dl{
}
.infomation dl dt{
}
.infomation dl dd{
}
}


.movie {
  /*background-image: url(../img/movie-bg-robot.png);*/
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.anime-base{
  width:80%;
  margin: 0 auto;
}
.anime-base img{
  width:100%;
}
.movie h2{
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  width:50%;
}
.movie h2 img{
  width:100%;
}
.movie__youtube{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  width:80%;

}
.movie__youtube iframe{
  width:80%;
  height:100%;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0 auto ;
}

.next-anime_copy{
  position: absolute;
  bottom: 0;
  right: 8%;
  width:48%;
}
.anime-btn{
  position: absolute;
  bottom: -1%;
  left: 8%;
  width:40%;
}


.btn-wrap {
  margin-top: -200px;
  margin-top: -12.5rem;
  position: relative;
  z-index: 10;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
.btn-wrap {
  max-width: 900px;
  max-width: 56.25rem;
}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
.btn-wrap {
    width:100%;
  }
  .btn-wrap img{
    width:100%;
  }
}
.btn-wrap__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.btn-wrap__flex a{
  width:50%;
  margin:0 auto;
}
.btn-wrap__flex img{
  max-width: 450px;
}






.manual-movie {
  display: block;
  width: 70%;
  margin: 0 auto;
}
#about {
  position: relative;
  margin-top: 10%;
}

.about__bg {
  position: absolute;
  z-index: -10;
}
.about__img {
  width: 100%;
}



.campaign-banner{
  width:70%;
  margin:-8% auto 10%;
}


.banner-base{
  width:80%;
  max-width: 690px;
  margin: 0 auto 1rem;
}
.banner-base img{
  width:100%;
}