@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%);
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .content{
    background:
      url("../img/bg_r.png") 0 18% / 100% no-repeat,
      url("../img/bg_v.png") 0 50.2% / 100% no-repeat,
      url("../img/bg_s.png") 0 74.4% / 100% no-repeat;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .content{
    background:
      url("../img/bg_r.png") 0 13.5% / 100% no-repeat,
      url("../img/bg_v.png") 0 36.5% / 100% no-repeat,
      url("../img/bg_s.png") 0 56% / 100% no-repeat;
  }
}
.content-bg{
  background:
    url("../img/bg01.png") center top / 100% repeat-y;
}

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

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

#robot{
  position: relative;
  margin-top:10%;
}
.img-robot-detail{
  position: relative;
}
#movie{
  position: absolute;
  top:21% !important;
  width:100%;
}
#movie iframe{
  width:100%;
  aspect-ratio: 16 / 9;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .movie-frame{
    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*/
  }
}

#vehicle{
  margin-top:10%;
}
.bg-detail{
}

#diorama{
  position: relative;
  margin-top:10%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  #diorama{
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  #diorama{
  }
}
#history{
  background-image: linear-gradient(90deg,rgba(0, 40, 60, 1),rgba(0, 104, 146, 1),rgba(0, 40, 60, 1));
  padding:50px 0;
}
#product{
  background-image: linear-gradient(90deg,rgba(0, 0, 0, 1),rgba(0, 50, 50, 1),rgba(0, 0, 0, 1));
  padding:50px 0;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  #history,
  #product{
    padding:50px 0;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  #history,
  #product{
    padding:20px 0;
    overflow: hidden;
  }
  #history div,
  #product div{
    width:130%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 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{
  }
  .img-robot-detail{
  }
}
@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{
  }
}
@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;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .tit_d{
    width:80%;
    margin:0 auto;
  }
}

.gallery-footer{
  color: #000;
  padding-bottom:5%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .gallery-footer{
    max-width: 1200px;
    margin: 50px auto 0;
  }
  .gallery-footer-text{

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


/* Slider ======================================== */
.diorama-box{
  background: #002800;
  padding:10px 0;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
.diorama-bg{
  width:1920px;
    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 {
    max-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: 15.5%;
  }
  .nextArrow{
    right:15.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:-30px;
  }
}
@media screen and ( max-width:768px ) { /* SP ==================== */
  .slick-dots{
    bottom:2%;
  }
}
.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: 10px !important;
  }
}
.slick-dots li.slick-active button:before{
    color: #ff7800 !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:100%;
  margin: 0 auto;
  background:#000;
}
}