/* == == */
@media only screen and (max-width: 767px) {
   .txt {
      text-align: justify;
   }

   .txt br {
      display: none;
   }

   .slick-dots {
      position: absolute;
   }

   .slick-dots li {
      width: 12px;
      height: 12px;
      border: 2px solid #fff;
      box-sizing: border-box;
      border-radius: 50%;
      margin: 0 5px;
   }

   .slick-dots li.slick-active {
      background-color: #fff;
   }

   .h-23 {
      font-size: 3.5vw;
      line-height: 10vw;
      letter-spacing: 0.32em;
   }

   .price {
      font-size: 3.5vw;
      line-height: 10vw;
      letter-spacing: 0.32em;
   }
}

@media only screen and (min-width: 768px) {
   .txt {
      text-align: justify;
   }

   .slick-dots {
      position: absolute;
      bottom: 0;
      right: 0;
   }

   .slick-dots li {
      width: 15px;
      height: 15px;
      border: 2px solid #fff;
      box-sizing: border-box;
      border-radius: 50%;
      margin: 0 7px;
   }

   .slick-dots li.slick-active {
      background-color: #fff;
   }

   .h-23 {
      font-weight: 400;
      font-size: 23px;
      letter-spacing: 0.32em;
      line-height: 77px;
   }

   .price {
      font-size: 18px;
      line-height: 50px;
      letter-spacing: 0.32em;
   }
}

/* == == */
#key {
   background: url("../img/floor/kv.jpg") no-repeat center/cover;
}

/* --- --- */
#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      background: url("../img/floor/sec1-deco1.png") no-repeat top right/70% auto;
      padding: 58vw 0 65vw;
   }

   #sec1:before {
      content: '';
      width: 105vw;
      height: 78vw;
      background: url("../img/floor/sec1-deco2.jpg") no-repeat center top/cover;
      position: absolute;
      bottom: -12vw;
      right: -2.5vw;
   }

   #sec1 h2 {
      height: 66vw;
      margin: 0 auto;
      padding-top: 15vw;
   }

   #sec1 .txt {
      width: 68vw;
      margin: 0 auto;
      position: relative;
      z-index: 1;
   }

   #sec1 .txt p {
      padding-top: 6vw;
   }

   #sec1 .photo {
      width: 105vw;
      margin-left: -2.5vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      background: url("../img/floor/sec1-deco1.png") no-repeat top right;
      padding: 460px 0 346px;
   }

   #sec1:before {
      content: '';
      width: 905px;
      height: 675px;
      background: url("../img/floor/sec1-deco2.jpg") no-repeat center top/cover;
      position: absolute;
      bottom: -66px;
      right: 0;
   }

   #sec1 h2 {
      height: 470px;
      margin-left: auto;
      padding: 347px 143px 0 0;
   }

   #sec1 .txt {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex-direction: row-reverse;
      margin: -138px 0 0 9px;
   }

   #sec1 .txt p {
      height: 540px;
   }

   #sec1 .txt p+p {
      padding-right: 36px;
   }

   #sec1 .photo {
      position: absolute;
      top: 0;
      left: -250px;
   }
}

/* --- --- */
#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      padding-bottom: 20vw;
   }

   #sec2 .box {
      width: 68vw;
      margin: 0 auto;
      padding: 0;
   }

   #sec2 h2 {
      margin: 0 auto;
      padding-top: 12vw;
   }

   #sec2 .txt {
      padding-bottom: 12vw;
   }

   #sec2 .txt p {
      padding-top: 6vw;
   }

   #sec2 .bg-parallax {
      height: 60vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 .box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      padding: 99px 281px 0 0;
   }

   #sec2 h2 {
      height: 360px;
   }

   #sec2 .txt {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      padding: 212px 85px 0 0;
   }

   #sec2 .txt p {
      height: 370px;
   }

   #sec2 .txt p+p {
      padding-right: 36px;
   }

   #sec2 .photo {
      text-align: right;
      margin-right: -170px;
   }

   #sec2 .bg-parallax {
      width: calc(100% - 152px);
      min-height: 680px;
      background-image: url("../img/floor/sec2-photo1.jpg");
	  background-position:center;
   }
}

/* --- --- */
#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      padding-bottom: 20vw;
   }

   #sec3 h2 {
      margin: 0 auto;
      padding-top: 8vw;
	  padding-bottom:10vw;
   }

   #sec3 .photo {
      margin: 0 -2.5vw;
   }

   #sec3 .txt {
      width: 68vw;
      margin: 0 auto;
      padding-top: 2vw;
      position: relative;
      z-index: 1;
   }

   #sec3 .txt p {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      padding: 170px 0 319px;
   }

   #sec3:before {
      content: '';
      width: 790px;
      height: 760px;
      background: url("../img/floor/sec3-deco1.jpg") no-repeat center top/cover;
      position: absolute;
      bottom: -178px;
      left: 0;
   }

   #sec3 h2 {
      height: 320px;
      margin-right: -29px;
      margin-left: auto;
      padding-top: 249px;
   }

   #sec3 .txt {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      margin-right: -12px;
      padding-top: 226px;
   }

   #sec3 .txt p {
      height: 350px;
   }

   #sec3 .txt p+p {
      padding-right: 36px;
   }

   #sec3 .photo {
      position: absolute;
      top: 0;
      left: -250px;
   }
}

/* --- --- */
#sec4 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec4 {
      padding-bottom: 15vw;
   }

   #sec4:before {
      content: '';
      width: 105vw;
      height: 100vw;
      background: url("../img/floor/sec3-deco1.jpg") no-repeat center top/cover;
      position: absolute;
      top: 60vw;
      left: -2.5vw;
   }

   #sec4:after {
      content: '';
      width: 0;
      height: 20vw;
      border-left: 1px solid #000;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-top: -10vw;
      z-index: 1;
   }

   #sec4 .photo1 dd {
      padding-top: 8vw;
   }

   #sec4 .photo2 {
      padding-top: 8vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      width: 100%;
      max-width: 1500px;
      margin: 0 auto;
      padding-bottom: 197px;
   }

   #sec4:after {
      content: '';
      width: 0;
      height: 100px;
      border-left: 1px solid #000;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-top: -48px;
      z-index: 1;
   }

   #sec4 .photo1 dt {
      text-align: right;
   }

   #sec4 .photo1 dd {
      padding-left: 66px;
   }

   #sec4 .photo2 {
      text-align: right;
      padding: 146px 24px 0 0;
   }
}

/* --- --- */