@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{
  color:#fff;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  background:
    url("../img/bg01.png") center top / 100% repeat-y,
    url("../img/bg02.png");
}
.content-bg{
  background:
    url("../img/bg03.png") center top / 100% no-repeat;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .content{
    width: 1920px;
    margin-top: 70px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .content{
    width: 130%;
    margin-top: 60px;
  }
  #top-image img{
    width:100%;
  }
}

@media screen and ( min-width:768px ) { /* PC ==================== */
  .mpg-logo{
    max-width: 740px;
    margin:20px auto 0;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .mpg-logo{
    max-width: 90%;
    margin:20px auto 0;
  }
}
.mpg-logo img{
  width: 100%;
}

.menu-area{
  text-align: right;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .menu-area ul li{
    margin:-60px 0;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .menu-area{
      margin-top:-40px;
  }
  .menu-area a{
    width: 100%;
  }
  .menu-area .btn-sp a img{
    height: 80px;
  }
  .menu-area ul{
    margin:10px -60px 0 0;
  }
  .menu-area ul li{
    margin:-20px 0 0 0;
  }
  .btn-diorama img{
      width: 100% ;
  }
}

@media screen and ( min-width:768px ) { /* PC ==================== */
.tit_movie{
  text-align: right;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
.tit_movie{
  text-align: center;
}
.tit_movie img{
  width:20%;
}
}

.movie-frame{
  background:#000;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  #movie{
    width:1200px;
    margin:100px auto 0;
  }
  .movie-frame{
    width:1200px;
    height:675px;
    padding:10px;
    box-shadow: 0 15px 15px 0 #000; /*左右の向きpx  上下の向きpx ぼかしpx 広がりpx*/
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .movie-frame{
    width:340px;
    height:191px;
    margin:0 auto;
    padding:5px;
    box-shadow: 0 15px 15px 0 #000; /*左右の向きpx  上下の向きpx ぼかしpx 広がりpx*/
  }
}
.movie-frame iframe,
.movie-frame video,
.movie-frame .movie-dammy{
  width:100%;
  height:100%;
}

.bg-detail{
}
#movie{
  position: relative;
  z-index: 3;
}
#diorama{
  position: relative;
  z-index: -1;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  #diorama{
    margin-top: -400px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  #diorama{
    margin-top: -200px;
  }
}
#history{
  background: #006481;
  padding:50px 0;
}
#product{
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(62, 58, 57, 1));
  padding:50px 0;
}

.img-robot-detail,
.img-vehicle-detail,
.img-combine-detail,
.img-series-detail,
.product-content{
  width: 100%;
  text-align: center;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .img-robot-detail,
  .img-vehicle-detail,
  .img-combine-detail,
  .img-series-detail,
  .product-content{
    min-width: 1200px;
  }
  .img-vehicle-detail{
    margin-top:-100px;
  }
  .img-robot-detail{
    margin-top:-50px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .img-robot-detail,
  .img-vehicle-detail,
  .img-combine-detail,
  .img-series-detail,
  .product-content{
    padding-top:0;
  }
  .img-vehicle-detail{
      margin-top:-20px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .img-robot-detail img,
  .img-vehicle-detail img,
  .img-combine-detail img,
  .img-series-detail img,
  .product-content img,
  #history img,
  .product-content-image img,
  .tit_d img{
    width:100%;
  }
  .btn_ttm img{
    width:50%;
  }
}
.tit_d{
  text-align: center;
}

.gallery-footer{
  color: #000;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .gallery-footer{
    width: 900px;
    margin: 50px auto 0;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .gallery-footer{
    width: 90%;
    margin: 0 auto;
  }
}
.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 .mpg-copyrigth{
    float: left;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .gallery-footer .mpg-copyrigth{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
}
.gallery-footer .mpg-copyrigth p{
    width:80%;
  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;
}


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

@media screen and ( min-width:640px ) { /* PC ==================== */
.diorama-bg{
  width:1200px;
    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: 1200px;
  }
  .slider div img{
    margin-top: 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider div{
    width: 80%;
  }
  .slider div img{
    width:100%;
  }
}

.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;
  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:-70px;
  }
  .nextArrow{
    right:-70px;
  }
}
@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:768px ) { /* PC ==================== */
  .slick-dots{
    bottom:-30px;
  }
}
@media screen and ( max-width:768px ) { /* SP ==================== */
  .slick-dots{
    bottom:-30px;
  }
}
.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: red !important;
}


@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%;
}
}

@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:80%;
  margin: 0 auto;
  background:#000;
}
}