@charset "UTF-8";

.section {
    margin-top: 100px;
    margin-bottom: 100px;
}
.section-padding {
    padding-bottom: 100px;
}
#mv h1 {
  max-width: 70vw;
}
/* ---------------
   Typography
--------------- */
.huge {
  font-size: 5rem;
  letter-spacing: .1em; }

/* ==========================================================================
   MV
========================================================================== */


#mv .slide {
  background-size: 750px;
}
#mv .slide.cont1 {
  background-image: url(../img/blue_back.png);
}
#mv .slide.cont2 {
  background-image: url(../img/orange_back.png);
}
#mv .slide.cont3 {
  background-image: url(../img/gray_back.png);
}

#mv h1 {
  max-width: 75vw;
}

@media only screen and (min-width: 576px) {
  #mv h1 {
    max-width: 420px;
  }
}

@media only screen and (min-width: 768px) {
  #mv .slider {
    max-height: 70vw;
  }
  #mv .slide {
    background-size: 300%;
    background-image: url(../img/mv_bg.png);
  }
  #mv .slide.cont1 {
    background-position: center bottom;
  }
  #mv .slide.cont2 {
    background-position: right bottom;
  }
  #mv .slide.cont3 {
    background-position: left bottom;
  }
}

/* ==========================================================================
   Intro
========================================================================== */
#intro .txtBox {
  margin-top: 120px;
}
#intro em {
  font-size: 7rem;
  top: -.6em;
}
#intro .sub_ttl {
  margin-bottom: 88px;
}
#intro .txtBox p {
  text-align: left;
}

@media only screen and (min-width: 768px) {
  #intro .txtBox {
    margin-top: 100px;
  }
  #intro em {
    font-size: 7.4rem;
    top: -.4em;
  }
  #intro .sub_ttl {
    margin-bottom: 40px;
  }
}


/* ==========================================================================
   Product
========================================================================== */
#product .topBox {
  padding-top: 100px;
}
#product .detailBox .item-info {
  margin-top: 40px;
  margin-bottom: 30px;
}

@media only screen and (min-width: 576px) {
  #product .topBox .bg img {
    height: 100vw;
  }
  #product .topBox .imgBox {
    width: 500px;
  }
}

@media only screen and (min-width: 768px) {
  #product .topBox .bg {
    background-size: 150%;
  }
  #product .topBox .bg img {
    height: 74vw;
  }
  #product .topBox .imgBox {
    width: 720px;
  }
}


/* ---------------
   1
--------------- */
#product #cont1 .topBox .imgBox .obj1 {
  right: 56%;
  bottom: 50%;
}
#product #cont1 .topBox .imgBox .obj2 {
  left: 70%;
  bottom: 32%;
}
@media only screen and (min-width: 768px) {
  #product #cont1 .topBox .imgBox .obj1 {
    right: 58%;
    bottom: 52%;
  }
  #product #cont1 .topBox .imgBox .obj2 {
    bottom: 34%;
  }
}

/* ---------------
   2
--------------- */
#product #cont2 .topBox .imgBox .obj1 {
  left: 49%;
  top: 62%;
}
@media only screen and (min-width: 768px) {
  #product #cont2 .topBox .imgBox .obj1 {
    left: 52%;
  }
}

/* ---------------
   3
--------------- */
#product #cont3 .topBox .imgBox .obj1 {
  left: 54%;
  top: 62%;
}


/* ---------------
   EC
--------------- */
#ec .slide figure {
  margin-bottom: 15px;
}
#ec .slide .size {
  font-size: .9rem;
}
#ec .slide .price {
  font-size: 1rem;
}

@media only screen and (max-width: 767px) {
  #ec::before {
    top: 300px;
  }
  #ec .slider {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  #ec .slide {
    display: block;
    float: none;
    flex: 0 0 50%;
    padding: 0 10px 25px;
  }
  #ec .slide:nth-last-of-type(-n+2) {
    padding-bottom: 0;
  }
  #ec .slide.slick-clone {
    display: none;
  }
  #ec .slider-controls-wrap {
    display: none;
  }
  #ec .more {
    margin-top: 50px;
  }
}

@media only screen and (min-width: 768px) {
  #ec::before {
    top: 300px;
  }
  #ec .ec-slider {
    overflow: hidden;
    margin-right: auto;
    margin-left: calc((100vw - 660px)/2);
  }
  #ec .slider {
    width: 660px;
  }
  #ec .slick-list{
    overflow: visible;
  }
  #ec .slide {
    padding-right: 30px;
  }
}