@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Fjalla+One&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

.livingArea01__listBox {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.livingArea01__listBox * {
  box-sizing: border-box;
}
.livingArea01__listBox img {
  max-width: 100%;
}
.livingArea01__img {
  max-width: 850px;
  width: 100%;
  margin: 120px auto 0;
  display: block;
}
@media screen and (max-width: 767px) {
  .livingArea01__img {
    max-width: 500px;
    margin: 50px auto 0;
  }
}

.presentArea01 {
  padding: 155px 0 0;
}
@media screen and (max-width: 767px) {
  .presentArea01 {
    padding: 78px 0 0;
  }
}
.presentArea01.first {
  padding: 50px 0 70px;
}
@media screen and (max-width: 767px) {
  .presentArea01.first {
    padding: 25px 0 30px;
  }
}

.presentTitle01 {
  text-align: center;
}
.presentTitle01 .title01 {
  font-size: 40px;
  font-weight: 700;
  /* color: #ffa800; */
  color: #156082;
}
@media screen and (max-width: 767px) {
  .presentTitle01 .title01 {
    font-size: 20px;
  }
}
.presentTitle01 .subTitle01 {
  font-size: 30px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .presentTitle01 .subTitle01 {
    font-size: 15px;
  }
}

.presentInner01 {
  max-width: 1020px;
  width: 100%;
  margin: 55px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .presentInner01 {
    margin: 20px auto;
    flex-wrap: wrap;
  }
}
.presentInner01 .imgArea01 {
  width: 50%;
  margin-right: 40px;
}
@media screen and (max-width: 767px) {
  .presentInner01 .imgArea01 {
    width: 94%;
    margin: 0 auto 10px;
  }
}
.presentInner01 .imgArea01 > img {
  max-width: 100%;
}
.presentInner01 .txtArea01 {
  width: 48%;
}
@media screen and (max-width: 767px) {
  .presentInner01 .txtArea01 {
    width: 100%;
  }
}
.presentInner01 .txtArea01 li:not(:last-child) {
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .presentInner01 .txtArea01 li:not(:last-child) {
    margin-bottom: 20px;
  }
}

.catalogTitle01 {
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .catalogTitle01 {
    text-align: center;
    font-size: 15px;
  }
}

.catalogTxt01 {
  font-size: 14px;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .catalogTxt01 {
    text-align: center;
    font-size: 12px;
  }
}

.presentLastLine01 {
  border: none;
  margin: 90px 0 0;
}
@media screen and (max-width: 767px) {
  .presentLastLine01 {
    margin: 40px 0 0;
  }
}

.detailBtn01 a {
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  width: 400px;
  height: 60px;
  margin: auto;
  /* background: #ffa800; */
  background: #156082;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .detailBtn01 a {
    font-size: 13px;
    width: 71%;
    height: 40px;
  }
}
.detailBtn01 a:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: auto 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  display: block;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .detailBtn01 a:after {
    width: 10px;
    height: 10px;
    right: 15px;
  }
}
.detailBtn01 a.disable {
  margin-top: 109px;
  background: #ccc;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .detailBtn01 a.disable {
    margin-top: 85px;
  }
}
.detailBtn01.green a {
  background: #649b28;
}

@media print, screen and (min-width: 768px) {
  .detailFootBtn01 {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .detailFootBtn01 {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 60px;
    visibility: hidden;
    transform: translateY(-61px);
    transition: visibility 0ms 400ms, transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .detailFootBtn01 a {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    height: 60px;
    /* background: #ffa800; */
    background: #156082;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.3);
  }

  .detailFootBtn01.is-show {
    visibility: visible;
    transform: translateY(0px);
    transition: visibility 0ms, transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}

.livingArea01__listBox .slide-arrow {
  width: 20px;
  height: 36px;
  margin-top: 0;
  position: absolute;
  top: 49%;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .livingArea01__listBox .slide-arrow {
    width: 30px;
    height: 37px;
  }
}

.livingArea01__listBox .prev-arrow {
  left: -5%;
  transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .livingArea01__listBox .prev-arrow {
    left: 4%;
  }
}

.livingArea01__listBox .next-arrow {
  right: -5%;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .livingArea01__listBox .next-arrow {
    right: 4%;
  }
}

.technologyArea01__listBox .slide-arrow {
  width: 47px;
  height: 60px;
  margin-top: -10px;
  position: absolute;
  top: 49%;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .technologyArea01__listBox .slide-arrow {
    width: 27px;
    height: 35px;
  }
}

.technologyArea01__listBox .prev-arrow {
  left: 0%;
}

.technologyArea01__listBox .next-arrow {
  right: 0%;
  transform: rotate(180deg);
  z-index: 5;
}

.slide-dots {
  text-align: center;
  margin: 40px auto 0;
  position: absolute;
  right: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .slide-dots {
    margin: 7px auto 0;
  }
}
.slide-dots li {
  display: inline-block;
  margin: 0 7px;
}
@media screen and (max-width: 767px) {
  .slide-dots li {
    margin: 0 5px;
  }
}
.slide-dots li button {
  width: 15px;
  height: 15px;
  display: block;
  position: relative;
  text-indent: -9999px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
@media screen and (max-width: 767px) {
  .slide-dots li button {
    width: 10px;
    height: 10px;
    background-size: contain;
  }
}
.slide-dots li button::before {
  content: "";
  width: 15px;
  height: 15px;
  margin: auto;
  background: url(../images/ico_dot.svg);
  background-size: 15px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .slide-dots li button::before {
    width: 10px;
    height: 10px;
    background-size: contain;
  }
}

.slick-active button::before {
  background: url(../images/ico_dot_active.svg) !important;
  background-size: contain !important;
}

.livingArea01__listBox .slide-dots {
  margin: -35px auto 0;
}
@media screen and (max-width: 767px) {
  .livingArea01__listBox .slide-dots {
    margin: 15px auto 0;
  }
}
