@charset "utf-8";
@media screen and ( min-width:640px ) { /* PC ==================== */
	.sp{
		display: none;
	}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
	.pc{
		display: none;
	}
}

.content{
  width: 100vw;
  overflow: hidden;
  color:#fff;
}

.content .section{
  width:100%;
  position: relative;
  overflow: hidden;
}
.title-arrow{
  margin-bottom:10px;
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .title-arrow{
    width:100%;
  }
}

#top-image{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  #top-image{
    background: url("../img/top-image.jpg") center center / cover no-repeat;
    min-height: calc(100vh - 82px);
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  #top-image{
    background: url("../img/top-image-sp2.jpg") center center / cover no-repeat;
    min-height: calc(100vh - 105px);
    height: -webkit-fill-available;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  #top-image div{
    width:1200px;
    margin-top:130px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  #top-image div{
    width:100%;
    margin-top:0;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .diorama-btn{
    margin-top:50px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .diorama-btn{
    position: absolute;
    text-align: center;
    bottom:0;
  }
  .diorama-btn a img{
    width:90%;
  }
}


@media screen and ( min-width:640px ) { /* PC ==================== */
  .img-btn-scroll{
    position: absolute;
    bottom:0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .img-btn-scroll{
    margin-top:40px;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .img-btn-scroll img{
    width:60px !important;
  }
}


.btn-scroll{
  text-align: center;
  margin:0;
}
#about .btn-scroll,
#movie .btn-scroll,
#robot-detail .btn-scroll,
#vehicle-detail .btn-scroll,
#combine-detail .btn-scroll{
  margin-bottom:30px;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .btn-scroll img{
    width:60px;
  }
}
.content-titile{
  text-align: center;
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .content-titile img{
    width:100%;
  }
}

#about{
  background: url("../img/bg_about.png") center center / cover no-repeat;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .mpg-logo{
    max-width: 740px;
    margin:20px auto 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .mpg-logo{
    max-width: 90%;
    margin:20px auto 0;
  }
}
.mpg-logo img{
  width: 100%;
}

#movie{
  background: url("../img/bg_movie.png");
}
.movie-frame{
  margin: 20px auto;
  position: relative;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .movie-frame{
    border: 4px solid #808080;
    width:800px;
    height:450px;
    padding:20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .movie-frame{
    border: 2px solid #808080;
    width:350px;
    height:197px;
    padding:10px;
  }
}
.movie-frame iframe,
.movie-frame video{
  width:100%;
  height:100%;
}
.movie-frame img{
  position: absolute;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .movie-frame img{
    top: -7px;
    left: -7px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .movie-frame img{
    width:30px;
    top: -3px;
    left: -3px;
  }
}

.bg-detail{
  background: url("../img/bg_trainbots.png") center top / 100% repeat-y;
}
#robot{
  background: url("../img/robot-image.png") center center / cover no-repeat;
}
#vehicle{
  background: url("../img/vehicle-image.png") center center / cover no-repeat;
}
#combine{
  background: url("../img/combine-image.png") center center / cover no-repeat;
}
.robot-image-text,
.vehicle-image-text,
.combine-image-text{
  width: 100%;
  overflow: hidden;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .robot-image-text,
  .vehicle-image-text,
  .combine-image-text{
    min-width: 1200px;
  }
}
.robot-image-text img,
.vehicle-image-text img,
.combine-image-text img{
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .robot-image-text img,
  .vehicle-image-text img,
  .combine-image-text img{
    width:150%;
  }
}

.img-robot-detail,
.img-vehicle-detail,
.img-combine-detail,
.img-display-detail{
  width: 100%;
  overflow: hidden;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .img-robot-detail,
  .img-vehicle-detail,
  .img-combine-detail,
  .img-display-detail{
    min-width: 1200px;
    padding-top:30px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .img-robot-detail,
  .img-vehicle-detail,
  .img-combine-detail,
  .img-display-detail{
    padding-top:50px;
  }
}

.img-robot-detail img,
.img-vehicle-detail img,
.img-combine-detail img,
.img-display-detail img{
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .img-robot-detail img,
  .img-vehicle-detail img,
  .img-combine-detail img,
  .img-display-detail img{
    width:150%;
  }
}

.content-gold-line{
  margin:0 auto;
  text-align: center;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .content-gold-line{
    width:1200px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .content-gold-line{
    width:100%;
  }
}
.content-gold-line img{
  width:100%;
  margin-top:20px;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  #display{
    padding-top:20px;
  }
}

#product{
  background: url("../img/bg_product.png") center top / 100% no-repeat;
  text-align: center;
}
.product-content{
  margin:0 auto;
  text-align: center;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .product-content{
    max-width:1200px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product-content{
    width:90%;
  }
}
.product-content div h3 img{
  margin-bottom:0;
}
.product-content .product-content-image img{
  width:100%;
}
.product-img01,
.product-img02{
  margin:20px 0;
}
.product-detail{
  margin:0;
}


@media screen and ( max-width:413px ) { /* SP：Android ==================== */
  #colorbox{
    margin:50px 0 0 0;
  }
}

.gallery{
}

.gallery-content{
  width: 100%;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .gallery-footer{
    width: 900px;
    margin: 20px auto 10px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery-footer{
    width: 90%;
    margin: 10px auto;
  }
}
.btn_tomytec{
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .btn_tomytec{
    width:250px;
    float: right;
  }
}
@media screen and ( max-width:640px ) { /* 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:640px ) { /* PC ==================== */
  .gallery-footer .mpg-copyrigth{
    float: left;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery-footer .mpg-copyrigth{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
}
.gallery-footer .mpg-copyrigth p{
  margin:0;
}
.gallery-footer .mpg-copyrigth p a{
  color:#fff;
  text-decoration: none;
}
.gallery-footer .mpg-copyrigth p a:hover{
  color:#fff;
}
.gallery-footer .mpg-copyrigth ul li{
  margin:5px;
  font-size: 12px;
}

/* Slider */
.slider {
  width: 90%;
  text-align: center;
  margin: 10px auto;
}
.slick-slide {
  width:100%;
  overflow: hidden;
}
.slick-slide img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);

}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #fff;
}
.prevArrow,
.nextArrow{
  position: absolute;
  z-index: 1000;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  cursor: pointer;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .prevArrow,
  .nextArrow{
    width:25px;
  }
  .prevArrow{
    left: -35px;
  }
  .nextArrow{
    right: -35px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .prevArrow,
  .nextArrow{
    width:20px;
  }
  .prevArrow{
    left: -10px;
  }
  .nextArrow{
    right: -10px;
  }
}
.slick-dots{
  bottom:none;
  z-index: 9999 !important;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-dots{
    bottom:-20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slick-dots{
    bottom:-20px;
  }
}
.slick-dots li button:before{
    font-family: 'slick';
    position: absolute;
    top: 0;
    left: 0;
    content: '•';
    text-align: center;
    line-height: 1.0;
    color: #fff !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: 8px !important;
  }
}
.slick-dots li.slick-active button:before{
    color: #dc0000 !important;
}


@media screen and ( min-width:640px ) { /* PC ==================== */
  div.mpg-copyrigth p img{
}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  div.mpg-copyrigth p img{
      width:100%;
}
}