#key {
  background: url("../img/petit_gateau/key.png") center 0 no-repeat; }
#key {
  position: relative;
  height: 900px; }

#sec1 {
  background: url("../img/petit_gateau/sec1_bg1.png") center 0 no-repeat; }
  #sec1 .wrap {
    padding-top: 35px;
    padding-bottom: 30px;
    transform: translateY(-78px); }
  #sec1 h2 {
    position: relative;
    left: 372px;
    top: -22px; }
  #sec1 h3 {
    font-size: 30px;
    line-height: 55px;
    letter-spacing: 0.075em;
    margin-bottom: 73px; }
  #sec1 .txt1 {
    margin-bottom: 39px; }
  #sec1 .content {
    margin-left: 375px; }

#sticky {
  position: relative;
  z-index: 1; }
  #sticky:before {
    content: '';
    width: 120%;
    height: 446px;
    position: absolute;
    top: -0px;
    left: -10%;
    background-color: #eb6a93;
    transform: rotate(7.5deg);
    z-index: -1; }
  #sticky .wrap {
    padding-top: 100px; }
  #sticky h3 {
    position: absolute;
    top: -912px;
    left: -144px; }
  #sticky h2 {
    position: absolute;
    top: 203px;
    right: 0; }
  #sticky .content {
    position: absolute;
    top: 642px;
    right: -24px; }
    #sticky .content h3 {
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0.1em;
      position: relative;
      left: auto;
      top: auto; }
    #sticky .content .price {
      font-size: 22px;
      line-height: 40px;
      letter-spacing: 0.1em;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      text-align: right; }
      #sticky .content .price span {
        font-size: 30px;
        line-height: 40px;
        letter-spacing: 0.1em; }
      #sticky .content .price:before {
        content: '';
        width: 76px;
        height: 2px;
        background-color: #d03464;
        margin-right: 22px; }
    #sticky .content .sub {
      text-align: right; }
  #sticky .txt-img {
    margin-top: -15px; }

#sec2 {
  padding-top: 161px;
  padding-bottom: 75px; }
  #sec2 .sec2_2 .row {
    margin-left: 60px; }
    #sec2 .sec2_2 .row .left li {
      margin-bottom: 20px; }
      #sec2 .sec2_2 .row .left li:last-child {
        margin-bottom: 0; }

#sec3 {
  background: url("../img/petit_gateau/sec3_bg1.png") center 0 no-repeat;
  position: relative;
  z-index: 1; }
  #sec3 .wrap {
    padding-top: 177px;
    padding-bottom: 305px; }
  #sec3 h2 {
    position: absolute;
    top: 0;
    left: 0; }
  #sec3 .sub {
    text-align: right;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 30px;
    color: #fff;
    margin-bottom: 13px; }
  #sec3 .wrap-js {
    width: 885px;
    margin-left: 215px;
    margin-right: -100px; }
    #sec3 .wrap-js .slider .sl h3 {
      position: absolute;
      right: 94px;
      top: 69px;
      font-size: 20px;
      line-height: 44px;
      letter-spacing: 0.1em; }
    #sec3 .wrap-js .slider .sl .contain {
      position: absolute;
      left: 30px;
      bottom: 35px; }
      #sec3 .wrap-js .slider .sl .contain dl {
        margin-bottom: 9px; }
        #sec3 .wrap-js .slider .sl .contain dl dt {
          font-size: 30px;
          line-height: 40px;
          letter-spacing: 0.1em; }
        #sec3 .wrap-js .slider .sl .contain dl dd {
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: flex;
          align-items: center;
          font-size: 22px;
          line-height: 40px;
          letter-spacing: 0.1em;
          padding-left: 5px; }
          #sec3 .wrap-js .slider .sl .contain dl dd span {
            font-size: 30px; }
          #sec3 .wrap-js .slider .sl .contain dl dd:before {
            content: '';
            background-color: #d03464;
            width: 75px;
            height: 3px;
            margin-right: 22px; }
      #sec3 .wrap-js .slider .sl .contain .txt {
        line-height: 30px; }
    #sec3 .wrap-js .slider-nav {
      margin-left: 60px;
      margin-right: 60px;
      margin-top: 5px; }
      #sec3 .wrap-js .slider-nav .slick-track {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-wrap: wrap;
        width: 800px !important;
        transform: translate3d(0px, 0px, 0px) !important; }
      #sec3 .wrap-js .slider-nav .slick-slide {
        width: 129px !important;
        height: 90px !important;
        margin-bottom: 20px;
        margin-right: 30px; }
      #sec3 .wrap-js .slider-nav .slick-current .item1 {
        background: url("../img/petit_gateau/sec3_nav_01_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item2 {
        background: url("../img/petit_gateau/sec3_nav_02_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item3 {
        background: url("../img/petit_gateau/sec3_nav_03_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item4 {
        background: url("../img/petit_gateau/sec3_nav_04_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item5 {
        background: url("../img/petit_gateau/sec3_nav_05_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item6 {
        background: url("../img/petit_gateau/sec3_nav_06_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item7 {
        background: url("../img/petit_gateau/sec3_nav_07_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item8 {
        background: url("../img/petit_gateau/sec3_nav_08_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item9 {
        background: url("../img/petit_gateau/sec3_nav_09_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .slick-current .item10 {
        background: url("../img/petit_gateau/sec3_nav_10_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav p {
        cursor: pointer;
        transition: 0.2s; }
      #sec3 .wrap-js .slider-nav .item1 {
        background: url("../img/petit_gateau/sec3_nav_01.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item1:hover {
          background: url("../img/petit_gateau/sec3_nav_01_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item2 {
        background: url("../img/petit_gateau/sec3_nav_02.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item2:hover {
          background: url("../img/petit_gateau/sec3_nav_02_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item3 {
        background: url("../img/petit_gateau/sec3_nav_03.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item3:hover {
          background: url("../img/petit_gateau/sec3_nav_03_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item4 {
        background: url("../img/petit_gateau/sec3_nav_04.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item4:hover {
          background: url("../img/petit_gateau/sec3_nav_04_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item5 {
        background: url("../img/petit_gateau/sec3_nav_05.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item5:hover {
          background: url("../img/petit_gateau/sec3_nav_05_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item6 {
        background: url("../img/petit_gateau/sec3_nav_06.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item6:hover {
          background: url("../img/petit_gateau/sec3_nav_06_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item7 {
        background: url("../img/petit_gateau/sec3_nav_07.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item7:hover {
          background: url("../img/petit_gateau/sec3_nav_07_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item8 {
        background: url("../img/petit_gateau/sec3_nav_08.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item8:hover {
          background: url("../img/petit_gateau/sec3_nav_08_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item9 {
        background: url("../img/petit_gateau/sec3_nav_09.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item9:hover {
          background: url("../img/petit_gateau/sec3_nav_09_on.jpg") 0 0 no-repeat; }
      #sec3 .wrap-js .slider-nav .item10 {
        background: url("../img/petit_gateau/sec3_nav_10.jpg") 0 0 no-repeat;
        width: 129px;
        height: 90px; }
        #sec3 .wrap-js .slider-nav .item10:hover {
          background: url("../img/petit_gateau/sec3_nav_10_on.jpg") 0 0 no-repeat; }

#sec4 {
  margin-top: -300px;
  padding-bottom: 140px; }
  #sec4 .bg-parallax {
    background-image: url("../img/petit_gateau/sec4_bg1.jpg");
    height: 734px; }

#sec5 .wrap {
  padding-bottom: 43px; }
#sec5 .row1 {
  margin-bottom: 89px; }
  #sec5 .row1 p.img1 {
    width: 50%;
    background: url("../img/petit_gateau/sec4_img1.jpg") center center/cover no-repeat;
    height: 500px; }
  #sec5 .row1 h2 {
    width: 50%;
    height: 500px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eb6a93; }
#sec5 .txt {
  text-align: center;
  margin-bottom: 86px; }
#sec5 .wrap-img {
  margin-left: -100px;
  margin-right: -100px;
  justify-content: space-between; }
#sec5 .deco1 {
  position: absolute;
  z-index: 1;
  right: -250px;
  bottom: 122px; }

#sec6 {
  position: relative;
  padding-top: 138px;
  background: url("../img/petit_gateau/sec6_bg1.png") center 0 no-repeat; }
  #sec6 .wrap {
    padding-bottom: 217px; }
  #sec6 h2 {
    margin-top: 198px; }
  #sec6 .txt {
    width: 529px;
    margin-top: 30px;
    margin-left: 353px; }
  #sec6 .btn1 {
    position: absolute;
    left: 115px;
    bottom: 234px; }

.viewer {
  height: 649px;
  margin-left: auto;
  margin-right: auto;
  max-width: 502px;
  width: 100%;
  background-image: url("../img/petit_gateau/sec2_img-plus.png");
  background-repeat: no-repeat;
  background-position: 0 50%; }
  .viewer:before {
    content: '';
    background: url("../img/petit_gateau/sec2_shadow.png") 0 0 no-repeat;
    width: 712px;
    height: 845px;
    left: 148px;
    bottom: 197px;
    position: absolute;
    z-index: -1; }

.viewer.frame1 {
  background-position: -502px 50%; }

.viewer.frame2 {
  background-position: -1004px 50%; }

.viewer.frame3 {
  background-position: -1506px 50%; }

.viewer.frame4 {
  background-position: -2008px 50%; }

@keyframes drink-coffee {
  to {
    background-position: -1800px 50%; } }