@charset "utf-8";

@media screen and ( min-width:640px ) { /* PC ==================== */
  #wrapper{
    background:
      url("../img/bg_trainbots.png") center top / 100% repeat-y,
      url("../img/top-image_bg.jpg") center center / cover fixed no-repeat;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  #wrapper{
    background:
      url("../img/bg_trainbots.png") center top / 100% repeat-y;
  }
  #wrapper::before{
    background:url("../img/top-image_bg-sp.jpg") no-repeat center;
      background-size: cover;/* cover指定できる */
      content: "";
      display: block;
      position: fixed;/* 擬似要素ごと固定 */
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;/* 横幅いっぱい */
      height: 100vh;/* 縦幅いっぱい */
  }
}

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

.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;
  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;
    margin-top:-80px;
    min-height: 1080px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  #top-image{
    background: url("../img/top-image-sp.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;
  }
}

.img-btn-scroll{
  position: absolute;
  bottom:0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.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  ==================== */
  .img-btn-scroll img,
  .btn-scroll img{
    width:60px;
  }
}
.content-titile {
  position: relative;
}
.content-titile h2{
  position:absolute;
  top:0;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .content-titile h2{
    width:180%;
  }
  .content-titile h2 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;
  }
  #about{
    background-size: 50%;
  }
}
.mpg-logo img{
  width: 100%;
}

#movie{
  background:
    url("../img/bg-cross.png"),
    radial-gradient(#323266, #000000);
}

.movie-bg{
  background:url("../img/bg-triangle.png") center top / cover no-repeat;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .menu-area,
  .movie-content{
    padding-top:150px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .movie-content{
    padding-top:20px;
  }
}

.menu-area{
  margin:0 auto;
  text-align: center;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .menu-area{
    width: 1200px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .menu-area{
    width: 95%;
    margin:0 auto;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .menu-area ul li{
    width: calc(33.33% - 10px);
    margin: 10px 0;
    float: left;
  }
  .menu-area ul li:nth-child(3n+1){
    margin-right: 15px;
  }
  .menu-area ul li:nth-child(3n){
    float: right;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .menu-area a{
    width: 100%;
  }
  .menu-area a img{
    width: 100%;
  }
  .menu-area ul li{
    width: calc(33.33% - 5px);
    margin: 10px 0;
    float: left;
  }
  .menu-area ul li:nth-child(3n+1){
    margin-right: 7px;
  }
  .menu-area ul li:nth-child(3n){
    float: right;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .menu-area p{
    width: 95%;
    margin:0 auto;
  }
  .menu-area p img{
    width: 100%;
  }
  a.btn-series{
    display: block;
    width:45%;
    margin: 0 auto;
  }
  a.btn-series img{
    width:100%;
  }
}

.movie-frame{
  margin: 20px auto;
  position: relative;
  background:
    url("../img/bg_movie.png"),
    #232e53;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .movie-frame{
    width:800px;
    height:450px;
    margin-top: 150px;
    padding:20px;
    box-shadow: 0 0 15px 0 #fff; /*左右の向きpx  上下の向きpx ぼかしpx 広がりpx*/
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .movie-frame{
    width:350px;
    height:197px;
    padding:10px;
    box-shadow: 0 0 15px 0 #fff; /*左右の向きpx  上下の向きpx ぼかしpx 広がりpx*/
    margin-top:50px;
  }
}
.movie-frame iframe,
.movie-frame video,
.movie-frame .movie-dammy{
  width:100%;
  height:100%;
}

.bg-detail{
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  #vehicle,
  #robot,
  #combine,
  #series,
  #diorama,
  #product{
    padding-top:100px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  #vehicle,
  #robot,
  #combine,
  #series,
  #diorama,
  #product{
    padding-top:20px;
  }
}

.robot-image-text,
.vehicle-image-text,
.combine-image-text,
.series-image-text{
  width: 100%;
  overflow: hidden;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .robot-image-text,
  .vehicle-image-text,
  .combine-image-text,
  .series-image-text{
    min-width: 1200px;
  }
}
.robot-image-text img,
.vehicle-image-text img,
.combine-image-text img,
.series-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,
  .series-image-text img{
    width:150%;
  }
}
.img-robot-detail,
.img-vehicle-detail,
.img-combine-detail,
.img-series-detail,
.product-content{
  width: 100%;
  overflow: hidden;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .img-robot-detail,
  .img-vehicle-detail,
  .img-combine-detail,
  .img-series-detail,
  .product-content{
    min-width: 1200px;
    padding-top:30px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .img-robot-detail,
  .img-vehicle-detail,
  .img-combine-detail,
  .img-series-detail,
  .product-content{
    padding-top:0;
  }
}

.img-robot-detail img,
.img-vehicle-detail img,
.img-combine-detail img,
.img-series-detail img,
.product-content 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-series-detail img,
  .product-content img{
    width:130%;
  }
}

#diorama{
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .diorama-bg{
    background:url("../img/diorama-bg.png") center top / cover no-repeat;
    background-size: 1255px;
    width:1255px;
    margin:0 auto;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .diorama-bg{
    background:url("../img/diorama-bg.png") center top / cover no-repeat;
    background-size: 100%;
    width:95%;
    padding-bottom:20px;
    margin:0 auto;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .gallery-footer{
    width: 900px;
    margin: 50px auto 10px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery-footer{
    width: 90%;
    margin: 0 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 ======================================== */
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slider {
    height:1105px;
    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);
    z-index: 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider {
    height:330px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    z-index: 0;
  }
}
.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: 1200px;
  }
  .slider div img{
    margin-top: 180px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider div{
    width: 95%;
  }
  .slider div img{
    width:100%;
    margin-top: 50px;
  }
}

.slick-slide {
  width:100%;
  overflow: hidden;
}
.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: 1200px;
  }
}
@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;
  z-index: 1000;
  top: 55%;
  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{
    top: 55%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .prevArrow,
  .nextArrow{
    top: 50%;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .prevArrow{
    left: -65px;
  }
  .nextArrow{
    right: -65px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .prevArrow,
  .nextArrow{
    height: 30px;
  }
  .prevArrow{
    left: 10px;
  }
  .nextArrow{
    right: 10px;
  }
}
.slick-dots{
  bottom:none;
  z-index: 9999 !important;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-dots{
    top:1110px;
  }
}
@media screen and ( max-width:428px ) { /* SP：iPhone 12 Pro Max ==================== */
  .slick-dots{
    width:95%;
    bottom:10px;
  }
}
@media screen and ( max-width:414px ) { /* SP：iPhone 11 / XR / 11 Pro Max / 6s / 7 / 8 plus ==================== */
  .slick-dots{
    width:95%;
    bottom:10px;
  }
}
@media screen and ( max-width:390px ) { /* SP：iPhone 12 / 12 Pro ==================== */
  .slick-dots{
    width:95%;
    bottom:20px;
  }
}
@media screen and ( max-width:375px ) { /* SP：iPhone 12 mini / 11 Pro/ X / XS / SE2 / 6s / 7 / 8 ==================== */
  .slick-dots{
    width:95%;
    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: #fff !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%;
}
}