@charset "utf-8";

/* Slider */
.slider {
  width: 100%;
  text-align: center;
  margin: 40px auto 0;
  margin-bottom: 0 !important;

  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  z-index: 0;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slider {
    height:721px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider {
    height:130%;
  }
}
.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: 1920px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slick-slide img {
    width: 130%;
  }
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #fff;
}
.prevArrow,
.nextArrow{
  position: absolute;
  z-index: 1000;
  top: 40%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  cursor: pointer;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .prevArrow{
    left: 20px;
  }
  .nextArrow{
    right: 20px;
  }
}
@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:600px;
  }
}
@media screen and ( max-width:428px ) { /* SP：iPhone 12 Pro Max ==================== */
  .slick-dots{
    top:165px;
  }
}
@media screen and ( max-width:414px ) { /* SP：iPhone 11 / XR / 11 Pro Max / 6s / 7 / 8 plus ==================== */
  .slick-dots{
    top:160px;
  }
}
@media screen and ( max-width:390px ) { /* SP：iPhone 12 / 12 Pro ==================== */
  .slick-dots{
    top:150px;
  }
}
@media screen and ( max-width:375px ) { /* SP：iPhone 12 mini / 11 Pro/ X / XS / SE2 / 6s / 7 / 8 ==================== */
  .slick-dots{
    top:142px;
  }
}
.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;
}

.content{
  overflow: hidden;
  text-align: center;
  position: relative;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .content{
    max-width:1920px;
    margin:0 auto;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .content{
    width:100%;
  }
}

.top-content{
  width:100%;
  position: relative;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .top-content{
    background: url("../img/topics-bg.png") center top no-repeat;
    margin-top: -101px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .top-content{
    background: url("../img/topics-bg-sp.png") center top no-repeat;
    background-size: 100%;
  }
}
@media screen and ( max-width:428px ) { /* SP：iPhone 12 Pro Max ==================== */
  .top-content{
    margin-top: -30px;
  }
}
@media screen and ( max-width:414px ) { /* SP：iPhone 11 / XR / 11 Pro Max / 6s / 7 / 8 plus ==================== */
  .top-content{
    margin-top: -29px;
  }
}
@media screen and ( max-width:390px ) { /* SP：iPhone 12 / 12 Pro ==================== */
  .top-content{
    margin-top: -27px;
  }
}
@media screen and ( max-width:375px ) { /* SP：iPhone 12 mini / 11 Pro/ X / XS / SE2 / 6s / 7 / 8 ==================== */
  .top-content{
    margin-top: -26px;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .tomica-logo{
    margin-top:220px;
    margin-bottom: 20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .tomica-logo{
    width:150px;
    margin-top:60px;
    margin-bottom: 20px;
  }
  .tomica-logo img{
    width:100%;
  }
}
.concept{
  font-family: 'Noto Serif JP', serif;
  font-weight: 900;
}
.concept img{
  vertical-align:baseline;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .concept{
    font-size: 25px;
    margin-top: 20px;
  }
  .concept img{
    height:25px;
    margin: 0 10px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .concept{
    font-size: 14px;
  }
  .concept img{
    height:14px;
    margin: 0 5px;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .topics{
    margin-top:50px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics{
    margin-top:20px;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .topics h2{
    margin-bottom: 20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics h2{
    margin-bottom: 10px;
  }
  .topics h2 img{
    width:130%;
  }
}
.topics-body-bg{
  background: url("../img/topics-bg2.png") center center no-repeat;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics-body-bg{
    background-size: 100% 100%;
  }
}
.topics-body{
  width:1200px;
  margin:0 auto;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .topics-body{
    width:1200px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics-body{
    width:80%;
    margin-left: 0 auto;
  }
}
.topics-card{
  text-decoration: none;
  color: #000;
  float: left;
  padding:5px;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .topics-card{
    width:280px !important;
    margin: 0 5px;
  }
}
@media screen and ( max-width:428px ) { /* SP：iPhone 12 Pro Max ==================== */
  .topics-card{
    width:171px !important;
  }
}
@media screen and ( max-width:414px ) { /* SP：iPhone 11 / XR / 11 Pro Max / 6s / 7 / 8 plus ==================== */
  .topics-card{
    width:165px !important;
  }
}
@media screen and ( max-width:411px ) { /* SP：Android ==================== */
  .topics-card{
    width:165px !important;
  }
}
@media screen and ( max-width:410px ) { /* SP：Android ==================== */
  .topics-card{
    width:164px !important;
  }
}
@media screen and ( max-width:390px ) { /* SP：iPhone 12 / 12 Pro ==================== */
  .topics-card{
    width:156px !important;
  }
}
@media screen and ( max-width:375px ) { /* SP：iPhone 12 mini / 11 Pro/ X / XS / SE2 / 6s / 7 / 8 ==================== */
  .topics-card{
    width:150px !important;
  }
}
@media screen and ( max-width:360px ) { /* SP：Android ==================== */
  .topics-card{
    width:144px !important;
  }
}
@media screen and ( max-width:320px ) { /* SP：Android ==================== */
  .topics-card{
    width:128px !important;
  }
}
.topics-card .topics-card-body{
  background: #fff;
  text-align: left;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .topics-card .topics-card-body{
    height:315px;
    border-bottom: 7px solid #dc0000;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics-card .topics-card-body{
    height:200px;
    border-bottom: 3px solid #dc0000;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
  }
}
.topics-card .topics-card-body .thumb{
}
.topics-card .topics-card-body .thumb img{
  width:100%;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .topics-card .topics-card-body div{
    padding:10px 20px;
  }
  .topics-card .topics-card-body div p{
    margin:5px 0 0 0;
    padding:0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics-card .topics-card-body div{
    padding:5px 10px;
  }
  .topics-card .topics-card-body div p{
    margin:5px 0 0 0;
    padding:0;
    font-size: 14px;
    line-height: 1.3;
  }
}

/*slick setting*/
.topics .slick-prev:before,
.topics .slick-next:before {
    color: #fff;
}
.topics .prevArrow,
.topics .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 ==================== */
  .topics .prevArrow{
    left: -90px;
  }
  .topics .nextArrow{
    right: -90px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .topics .prevArrow,
  .topics .nextArrow{
    height: 20px;
  }
  .topics .prevArrow{
    left: -25px;
  }
  .topics .nextArrow{
    right: -25px;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .btn-readmore{
    margin:30px 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .btn-readmore{
    width:100px;
    margin:15px auto;
  }
  .btn-readmore img{
    width:100%;
  }
}

.product-series-head,
.product-series-foot{
  width:100%;
}
.product-series-body{
  background: url("../img/product-series-body.png") center top repeat-y;
  background-size: 100%;
}
.product-series-body img{
  width:100%;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .product-series-body img{
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product-series-body img{
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }
}
.btn-unlimited,
.btn-theater,
.btn-premium,
.btn-premium-rs,
.btn-racing,
.btn-10th{
  width:49%;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .btn-unlimited,
  .btn-theater,
  .btn-premium,
  .btn-premium-rs,
  .btn-racing,
  .btn-10th{
    padding:15px 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .btn-unlimited,
  .btn-theater,
  .btn-premium,
  .btn-premium-rs,
  .btn-racing,
  .btn-10th{
    padding:5px 0;
  }
}

.btn-10th{
  float: left;
}
.btn-premium{
  float: right;
}
.btn-unlimited{
  float: left;
}
.btn-theater{
  float: right;
}
.btn-premium-rs{
  float: right;
}
.btn-racing{
  float: right;
}


@media screen and ( min-width:640px ) { /* PC ==================== */
  .gallery h2{
    margin-bottom: 20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery h2{
    margin-top:10px;
    margin-bottom: 10px;
  }
  .gallery h2 img{
    width:130%;
  }
}
.gallery-body-bg{
  background: url("../img/gallery-bg.png") center center no-repeat;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery-body-bg{
    background-size: 100% 100%;
  }
}
.gallery-body{
  width:1200px;
  margin:0 auto 20px;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .gallery-body{
    width:1200px;
    margin:0 auto 20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery-body{
    width:90%;
    margin:0 auto;
  }
}
.gallery-body a{
  float: left;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .gallery-body a{
    margin: 10px 0;
    width: calc(33.33% - 10px);
  }
  .gallery-body a:nth-child(3n+1){
  	margin-right: 15px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .gallery-body a{
  	margin: 0 0;
    width: calc(33.33% - 4px);
  }
  .gallery-body a:nth-child(3n+1){
  	margin-right: 6px;
  }
}
.gallery-body a:nth-child(3n){
  float: right;
}
.gallery-body a img{
  width:100%;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
}

.tomica-footer-bg{
  background: url("../img/footer-bg.png") center top no-repeat;
  position: relative;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .tomica-footer-bg{
    height:276px;
    margin-top:50px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .tomica-footer-bg{
    background-size: 130%;
    height:70px;
    margin-top:10px;
  }
}
.tomica-footer-bg a{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .tomica-footer-bg a{
    bottom:50px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .tomica-footer-bg a{
    width:100px;
    bottom:-5px;
  }
  .tomica-footer-bg a img{
    width:100%;
  }
}