@charset "utf-8";
#wrapper{
  background: #fff;
  position: relative;
  overflow: hidden;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
}

.content{
  margin:0 auto;
  color: #fff;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .content{
    max-width: 1920px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .content{
    width: 100%;
    margin-top: 50px;
  }
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .content-bg{
      min-height:100vh;
      background-attachment:fixed;
      background-size:cover;
      background-position:center;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .content-bg::before{
    content: "";
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}
.content-bg-red{
  background-image:url(../img/bg_red.jpg);
  background-position: center;
}
.content-bg-blue{
  background-image:url(../img/bg_blue.jpg);
  background-position: center;
}
.content-bg-riden{
  background-image:url(../img/bg_riden.jpg);
  background-position: center;
}

.bg_real{
  background-image:url(../img/bg_real.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}

#top-image,
#robot-image{
  width:100%;
}
#top-image img,
#robot-image img{
  width:100%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}

#diorama{
  position: relative;
  margin-top: 10%;
}
.tit_dt,
.tit_db,
.tit_dt img,
.tit_db img{
  width:100%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .tit_db{
    margin-top:-30px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .tit_db{
    margin-top:-40px;
  }
}

/* Slider ======================================== */
.diorama-box{
  background: #460000;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
.diorama-bg{
  max-width:1920px;
  width:100%;
  margin:0 auto;
}
  .slider {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
}
.slider div{
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
  padding:0;
  z-index: 0;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slider div{
    width: 100%;
  }
  .slider div img{
    margin-top: 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider div{
    width: 100%;
    height: 200% !important;
  }
  .slider div img{
    width:100%;
  }
}

.slick-slide {
  width:100%;
  overflow: hidden;
  margin:0 40px;
}
.slick-slide img {
  height: auto;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-slide img {
    width: 100%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slick-slide img {
    width: 100%;
  }
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
  color: #fff;
}
.prevArrow,
.nextArrow{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  cursor: pointer;
  z-index:9999 !important;
  }
@media screen and ( min-width:640px ) { /* PC ==================== */
  .prevArrow,
  .nextArrow{
    top: 50%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .prevArrow,
  .nextArrow{
    top: 50%;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .prevArrow{
    left: 14.5%;
  }
  .nextArrow{
    right:14.5%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .prevArrow,
  .nextArrow{
    height: 10%;
  }
  .prevArrow{
    left: 10px;
  }
  .nextArrow{
    right: 10px;
  }
}
.slick-dots{
  bottom:none;
  z-index: 9999 !important;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .slick-dots{
    bottom:-7%;
  }
}
@media screen and ( max-width:768px ) { /* SP ==================== */
  .slick-dots{
    bottom:-3%;
  }
}
.slick-dots li button:before{
    font-family: 'slick';
    position: absolute;
    top: 0;
    left: 0;
    content: '■';
    text-align: center;
    line-height: 1.0;
    color: #000 !important;
    width: 20px;
    height: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-dots li button:before{
      font-size: 15px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slick-dots li button:before{
      font-size: 10px !important;
  }
}
.slick-dots li.slick-active button:before{
    color: #AD0000 !important;
}


.gallery-footer{
  color: #000;
  padding-top:3%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .gallery-footer{
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .gallery-footer{
    width: 100%;
  }
}
.btn_tomytec{
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .btn_tomytec{
    width:250px;
    float: right;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .btn_tomytec{
    width:150px;
    margin:20px auto 10px;
  }
}
.btn_tomytec a img{
  width:100%;
}
.gallery-footer .mpg-copyrigth{
  font-size: 12px;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .gallery-footer-text p{
    float: left;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .gallery-footer-text{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
}
.gallery-footer .mpg-copyrigth p{
  width:;
  margin:0 auto;
}
.gallery-footer .mpg-copyrigth p a{
  color:#000;
  text-decoration: none;
}
.gallery-footer .mpg-copyrigth p a:hover{
  color:#000;
}
.gallery-footer .mpg-copyrigth ul li{
  margin:5px;
  font-size: 12px;
}

/* ROBOT MODE ======================================== */
#robot{
  margin-top:10%;
}
.img-robot-detail{
  width:100%;
}
.img-robot-detail img{
  width:100%;
}
#movie{
  width:100%;
  margin-top:5%;
}
#movie img{
  width:100%;
  margin:0;
  padding:0;
}
#movie iframe{
  width:100%;
  margin:0;
  padding:0;
  aspect-ratio: 16 / 9;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .movie-frame{
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .movie-frame{
    width:340px;
    height:191px;
    margin:0 auto;
  }
}

/* ROBOT MODE - VEHICLE MODE ======================================== */
.robot-vehicle{
  width:100%;
}
.robot-vehicle img{
  width:100%;
}

/* VEHICLE MODE ======================================== */
#vehicle{
  width:100%;
}
.img-vehicle-detail{
  width:100%;
}
.img-vehicle-detail img{
  width:100%;
}

/* GATTAI MODE ======================================== */
#combine{
  width:100%;
  padding-bottom:10%;
}
.img-combine-top,
.img-combine-detail{
  width:100%;
}
.img-combine-top img,
.img-combine-detail img{
  width:100%;
}
.img-combine-detail img{
  margin-top:5%;
}
.img-combine-detail-inner{
  width:90%;
  margin:0 auto;
}
.img-combine-detail-inner img{
  width:100%;
  margin-top:5%;
}

#product{
  background-image: linear-gradient(90deg,rgba(0, 0, 0, 1),rgba(30, 30, 40, 1),rgba(0, 0, 0, 1));
  padding:10% 0;
}

.product-content-image{
  width:100%;
}
.product-content-image img{
  width:100%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  #history,
  #product{
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  #history,
  #product{
  }
  #history div,
  #product div{
    width:100%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
  }
}

@media screen and ( max-width:768px ) { /* SP  ==================== */
  .btn_ttm img{
    width:50%;
  }
}

@media screen and ( min-width:768px ) { /* PC ==================== */
  div.mpg-copyrigth p img{
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  div.mpg-copyrigth p{
      width:60%;
      margin: 0 auto;
  }
  div.mpg-copyrigth p img{
      width:100%;
  }
}
div.mpg-copyrigth ul{
  margin-top:5%;
}


@media screen and ( min-width:768px ) { /* PC ==================== */
.tf-menu-area{
  width:100%;
  margin: 0 auto;
  background:#000;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
.tf-menu-area{
  width:100%;
  margin: 0 auto;
  background:#000;
}
}