@charset "UTF-8";




/* mv_area
================================ */
.mv_area {
  position: relative;
}

/* 
================================== */
.inner {
  max-width: 1480px;
  margin: auto;
}
.item_lead {
  font-size: 24px;
  line-height: calc(48 / 24);
  letter-spacing: 0.1em;
  color: #000;
  font-weight: 500;
}
.item_lead span {
  font-size: 16px !important;
  margin-left: 20px;
}
.item_text {
  margin-top: 30px;
  font-size: 16px;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
  color: #000;
  font-weight: 500;
} 
.item_text + .item_text {
  margin-top: 20px;
} 
.item_body_wrap {
  padding-left: 6%;
  padding-right: 20px;
}

@media only screen and (max-width:767px) {
  .item_lead {
    font-size: 18px;
    line-height: 2;
  }
  .item_lead span {
    font-size: 12px;
  }
}

/* other-sec
======================================= */
.other-sec {
  margin-top: 80px;
  padding:0px 50px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.other-sec_wrap {
  position: relative;
}
.other-sec_text {
  position: absolute;
  width: 193px;
  width: clamp(12.4rem, 6.031rem + 8.293vw, 19.3rem);
  /* bottom: 94px;
  bottom: 190px;
  bottom: clamp(19rem, 27.862rem + -11.538vw, 9.4rem); */
  top: 340px;
  top: clamp(4.6rem, -22.538rem + 35.337vw, 34rem);
  left: -40px;
  left: calc(clamp(2.7rem, 1.5rem + 1.563vw, 4rem) * -1);
  z-index: 9999;
}
.other-sec_wrap .inner {
  position: relative;
  padding:0px 0px 150px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-left: 1px solid rgba(255, 255, 255, .2);
  border-right: 1px solid rgba(255, 255, 255, .2);
}
.other-sec_cap {
  max-width: 1000px;
  margin: 90px auto 0;
}
.other-sec_cap p {
  font-size: 10px;
  line-height: 2;
  letter-spacing: 0.1em;
  font-weight: bold;
  color: #fff;
}

@media only screen and (max-width:767px) {
  .other-sec {
    margin-top: 80px;
    padding:0px 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .other-sec_text {
    position: absolute;
    width: 60px;
    bottom: auto;
    top: 18px;
    left: -11px;
    z-index: 9999;
  }
  .other-sec_wrap .inner {
    position: relative;
    padding:0px 0px 60px;
  }
  .other-sec_cap {
    max-width: 1000px;
    margin: 80px auto 0;
  }
  .other-sec_cap p {
    font-size: 10px;
    line-height: 2;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: #fff;
  }
}



/* sec-copy
=================================== */
.sec-copy {
  text-align: center;
}

.sec-copy .inner {
  padding: 100px 20px;
}

.sec-copy .inner h2 {
  color: #000;
  font-size: 21px;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
}

@media only screen and (max-width:767px) {
  .sec-copy .inner h2 {
    font-size: 18px;
    line-height: 2;
  }
}



/* sec-rounge
=================================== */
.sec-rounge {
  padding: 0 50px;
}
.sec-rounge_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sec-rounge_wrap_img {
  padding-bottom: 120px;
  width: calc(740 / 1480 * 100%);
}
.sec-rounge_wrap_body {
  padding-bottom: 120px;
  width: calc(740 / 1480 * 100%);

}

@media only screen and (max-width:767px) {
  .sec-rounge  {
    padding: 0 20px;
  }
  .sec-rounge_wrap {
    flex-direction: column;
  }
  .sec-rounge_wrap_img {
    padding-bottom: 30px;
    width: 100%;
    border-right: none;
  }
  .sec-rounge_wrap_body {
    padding-top: 20px;
    padding-bottom: 60px;
    width: 100%;
  }
}

/* sec-workspace
=================================== */
.sec-workspace  {
  padding: 0 50px;
}
.sec-workspace_wrap {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}
.sec-workspace_wrap_img {
  padding-bottom: 120px;
  width: calc(740 / 1480 * 100%);
}
.sec-workspace_wrap_body {
  padding-bottom: 120px;
  width: calc(740 / 1480 * 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width:767px) {
  .sec-workspace  {
    padding: 0 20px;
  }
  .sec-workspace_wrap {
    flex-direction: column;
  }
  .sec-workspace_wrap_img {
    padding-bottom: 60px;
    width: 100%;
    border-left: none;
  }
  .sec-workspace_wrap_body {
    padding-bottom: 60px;
    width: 100%;
  }
}

/* sec-kids
=================================== */
.sec-kids  {
  padding: 0 50px;
}
.sec-kids_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sec-kids_wrap_img {
  padding-bottom: 120px;
  width: calc(740 / 1480 * 100%);
}
.sec-kids_wrap_body {
  padding-bottom: 120px;
  width: calc(740 / 1480 * 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width:767px) {
  .sec-kids  {
    padding: 0 20px;
  }
  .sec-kids_wrap {
    flex-direction: column;
  }
  .sec-kids_wrap_img {
    padding-bottom: 30px;
    width: 100%;
    border-right: none;
  }
  .sec-kids_wrap_body {
    padding-top: 20px;
    padding-bottom: 60px;
    width: 100%;
  }
}

/* sec-caption
================================ */
.sec-caption  {
  padding: 0 50px;
}
.sec-caption .inner  {
  padding: 100px 50px;
}
.sec-caption p {
  font-size: 11px;
  color: #000;
  line-height: 2;
}
.caption {
  font-size: 11px !important;
  margin-top: 10px;
}

@media only screen and (max-width:767px) {
  .sec-caption  {
    padding: 0 20px;
  }
  .sec-caption .inner  {
    padding: 50px 20px;
  }
}


/* slick-dots
================================ */
.slick-dots{
  bottom:-40px;
  display: flex;
  justify-content: right;
  padding-right: 20px;
}
.slick-dots li {
  display: block;
  margin: 0 6px; 
  width: 70px;
  height: 3px;
}
.slick-dots li button:before {
  content:'';
  width: 70px;
  height: 3px;
  background: #fff;
  border-radius: 20px;
  opacity: 1;
}
.slick-dots li.slick-active button:before{
  background: #c3bb7c;
}

@media only screen and (max-width:767px) {
  .slick-dots{
    bottom:-20px;
    padding-right: 10px;
  }
  .slick-dots li {
    margin: 0 2px; 
    width: 30px;
    height: 2px;
  }
  .slick-dots li button:before {
    width: 30px;
    height: 2px;
  }
}
