@charset "UTF-8";

.mainBlk{
  padding: 90px 0 110px;
  text-align: center;
}
.mainBlk .title{
  width: 805px;
  margin: 0 auto 70px;
	font-family: "TrajanPro-Regular";
  font-size: 50px;
  letter-spacing: 0.15em
}
.mainBlk .mainCatch{
  width: 873px;
  margin: 0 auto 30px;
  font-size: 0;
}
.mainBlk .copy{
  font-size: 30px;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (max-width: 1120px){
  .mainBlk{
    padding: 8.036% 0;
  }
  .mainBlk .title{
    width: 71.875%;
    margin-bottom: 10.714%;
  }
  .mainBlk .mainCatch{
    width: 77.946%;
    margin-bottom: 2.679%;
  }
  .mainBlk .text{
    font-size: 1.429vw;
  }
}

@media screen and (max-width: 768px){
  .mainBlk{
    padding: 10.417% 0;
  }
  .mainBlk .title{
    width: 88.542%;
    /*! margin-bottom: 11.719%; */
    font-size: 6.51vw;
    margin-top: 11.047%;
    margin-bottom: 6.51%;
  }
  .mainBlk .mainCatch{
    width: 86.849%;
    margin-bottom: 5.208%;
  }
  .mainBlk .text{
    font-size: 3.125vw;
    line-height: 1.833;
  }
  .mainBlk .copy{
    font-size: 3.906vw;
    margin-bottom: 10.417%;
  }

}

/*　スライダー*/
/*-------------------------------------------------------*/
.modelroomSliderWrap{
	margin: 0 auto 120px;
}
.modelroomSliderWrap .cap{
	width: 1110px;
	margin: 0 auto;
	font-size: 13px;
}
.slideWrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1110px;
	margin: 0 auto;
}
.slider-for{
  margin-bottom: 10px;
}
.slide-item img{
    width: 100%;
}
.thumb{
  margin: 0 auto;
  font-size: 0px;
}
.thumb-item{
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  position:relative;
  width: 214px;
  cursor: pointer;
}
.thumb-item:hover{
  opacity: 0.5;
}
.thumb-item:nth-child(5n) {
  margin-right: 0px;
}
.slick-prev, .slick-next {
  display: block;
  width: 40px;
  height: 40px;
  z-index: 10;
  background: transparent;
  background-color: #000;
}
.slick-prev::before {
  content: '';
  display: block;
  width: 11.312px;
  height: 11.312px;
  border: 2px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(45deg);
  margin-left: 16px;
}
.slick-next::before {
  content: '';
  display: block;
  width: 11.312px;
  height: 11.312px;
  border: 2px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-135deg);
  margin-left: 9px;
}

.slick-prev {
  left: 0px;
}
.slick-next {
  right: 0px;
}

/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (max-width: 1120px){
	.modelroomSliderWrap .cap{
		width: 99.107%;
		font-size: 1.161vw;
	}
  .slider-for {
    margin-bottom: 0.893%;
  }
  .slide-item img{
/*       width: 100%; */
  }
  .thumb{
    margin: 0;
  }
  .thumb-item{
    margin-bottom: 0.893%;
    margin-right: 0.893%;
    width: 19.107%;
  }
  .thumb-item:nth-child(5n) {
    margin-right: 0px;
  }
}
@media screen and (max-width: 768px){
	.modelroomSliderWrap{
    margin: 0 auto 13.020vw;
	}
	.modelroomSliderWrap .cap{
    max-width: 89.583%;
		font-size: 2.604vw;
	}
  .slideWrap{
    max-width: 89.583%;
  }
  .slider-for {
    margin-bottom: 1.04vw;
  }
  .slide-item img{
      width: 100%;
  }
  .thumb{
    margin: 0 auto;
    font-size: 0px;
  }
  .thumb-item{
    display: inline-block;
    margin-right: 1.163%;
    margin-bottom: 1.04vw;
    position:relative;
    width: 24.127%;
  }
  .thumb-item:nth-child(5n) {
    margin-right: 1.163%;
  }
  .thumb-item:nth-child(4n) {
    margin-right: 0%;
  }

  .slick-prev, .slick-next {
    width: 5.208vw;
    height: 5.208vw;
    padding-bottom: 0;
  }
  .slick-prev::before {
    content: '';
    display: block;
    width: 1.472vw;
    height: 1.472vw;
    border: 0.26vw solid;
    border-color:  transparent transparent #FFF #FFF;
    margin-left: 2.083vw;
  }
  .slick-next::before {
    width: 1.472vw;
    height: 1.472vw;
    border: 0.26vw solid;
    border-color:  transparent transparent #FFF #FFF;
    margin-left: 1.172vw;
  }
}

/*　スライダーのタブ*/
/*-------------------------------------------------------*/
.modelroomTabWrap{
	display: flex;
	justify-content: space-between;
  max-width: 1110px;
  margin: 0 auto 10px;
}
.modelroomTabWrap .modelroomTab:not(:first-child) {
  margin-left: 10px;
}
.modelroomTab{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ddd;
	width: 100%;
	padding: 10px 0;
	font-family: "TrajanPro-Regular";
	font-size: 35px;
	line-height: 1;
	vertical-align: text-bottom;
}
.modelroomTab.is-active{
	background-color: #c9b94f;
}
.modelroomTab .ground{
  font-family: "FP-ヒラギノ明朝 ProN W3";
}
.modelroomTab .type{
	font-size: 20px;
}
.tabWrap {
  display: none;
}
.tabWrap.is-show {
  display: block;
}
/* バーチャルモデルルーム */
/*-------------------------------------------------------*/
.virtualModelRoomWrap {
  background-color: #333333;
  color: #FFF;
  padding-bottom: 90px;
}
.innerWrap {
  max-width: 1110px;
  margin: 0 auto;
}
.virtualModelRoomWrap .secTtl {
  padding: 50px 0 45px;
}
.virtualModelRoomWrap h3.title {
  color:#d0c26d;
  text-align: center;
  margin-bottom: 10px;
  font-size: 17px;
}
.virtualModelRoomWrap .secTtl p {
  color: #FFF;
  text-align: center;
  font-size: 24px;
}
.banner {
  display: flex;
  background-color: #FFF;
}
#container .banner img{
  width: 59.459%;
}
.banner .typeWrap {
  padding: 40px;
  background-color: #FFF;
  width: auto;
  font-size: 0px;

}
.banner .typeWrap p {
  font-size: 27px;
}
.banner .typeWrap p.type {
  letter-spacing: 0.05em;
  color:#d0c26d;
}
.banner .typeWrap p.type span.largeChar {
  font-size: 54px;
}
.banner .typeWrap p.type span.smallChar {
  font-size: 27px;
  letter-spacing: 0.05em;
}
.banner .typeWrap p.ldk {
  display: inline-block;
  margin-right: 20px;
  letter-spacing: 0.05em;
}
.banner .typeWrap p.ldk span.largeChar {
  font-size: 24.37px;
    letter-spacing: 0.05em;
}
.banner .typeWrap p.ldk span.smallChar {
  font-size: 20.31px;

}
.banner .typeWrap .area {
  display: inline-block;

}
.banner .typeWrap .area .areaTitle {
  font-size: 12px;
    letter-spacing: 0.05em;
}
.banner .typeWrap .area p .num {
  font-size: 28.44px;
}
.banner .typeWrap .area p span.smallChar {
  font-size: 12.19px;
}
.btn_virtualModelRoom {
  display: block;
  background-color: #333333;
  color: #FFF;
  font-size: 16px;
  text-align: center;
  padding: 15px;
  max-width: 270px;
  margin-top: 30px;
  letter-spacing: 0.05em;
}

.pageCaption {
  width: 1110px;
  padding: 25px 0;
  margin: 0 auto;
  font-size: 13px;
}
/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (max-width: 1120px){
	.modelroomTab{
		width: 100%;
		padding: 10px 0;
		font-size: 3.125vw;
	}
	.modelroomTab .type{
		font-size: 1.786vw;
	}
  .virtualModelRoomWrap {
    padding-bottom: 8.036%;
  }

  .virtualModelRoomWrap .secTtl {
    padding: 4.464% 0 4.018%;
  }
  .virtualModelRoomWrap h3.title {
    margin-bottom: 0.893%;
    font-size: 1.518vw;
  }
  .virtualModelRoomWrap .secTtl p {
    font-size: 2.143vw;
  }

  .banner img{
    flex-basis: 59.459%;
  }
  .banner .typeWrap {
    padding: 3.571%;
  }
  .banner .typeWrap p {
    font-size: 2.411vw;
  }

  .banner .typeWrap p.type span.largeChar {
    font-size: 4.821vw;
  }
  .banner .typeWrap p.type span.smallChar {
    font-size: 2.411vw;
  }
  .banner .typeWrap p.ldk {
    margin-right: 1.785vw;
  }
  .banner .typeWrap p.ldk span.largeChar {
    font-size: 2.176vw;
  }
  .banner .typeWrap p.ldk span.smallChar {
    font-size: 1.813vw;
  }
  .banner .typeWrap .area {
    display: inline-block;
  }
  .banner .typeWrap .area .areaTitle {
    font-size: 1.071vw;
  }
  .banner .typeWrap .area p .num {
    font-size: 2.539vw;
  }
  .banner .typeWrap .area p span.smallChar {
    font-size: 1.088vw;
  }
  .btn_virtualModelRoom {
    font-size: 1.429vw;
    padding: 1.339vw;
    margin-top: 2.679vw;
  }

  .pageCaption {
    width: 99.107%;
    padding: 2.232% 0;
    margin: 0 auto;
    font-size: 1.161vw;
  }
}

@media screen and (max-width: 768px){
  .modelroomTabWrap {
    max-width: 89.583%
  }
	.modelroomTab{
		width: 100%;
		padding: 10px 0 5px;
		font-size: 4.557vw;
	}
	.modelroomTab .type{
		font-size: 2.604vw;
	}
  .virtualModelRoomWrap {
    background-color: #333333;
    color: #FFF;
    padding-bottom: 5.2%;
  }

  .innerWrap {
    max-width: 89.583%
  }
  .virtualModelRoomWrap .secTtl {
    padding: 9.114% 0 6.510%;
  }
  .virtualModelRoomWrap h3.title {

    margin-bottom: 4.167vw;
    font-size: 3.125vw;
  }
  .virtualModelRoomWrap .secTtl p {
    font-size: 4.167vw;
  }
  .banner {
    display: block;
  }
  #container .banner img{
    width: auto;
  }
  .banner .typeWrap {
    padding: 6.51vw;
  }
  .banner .typeWrap p {
    font-size: 5.581vw;
  }
  .banner .typeWrap p.type span.largeChar {
    font-size: 11.161vw;
    margin-right: 0.26vw;
  }
  .banner .typeWrap p.type span.smallChar {
    font-size: 5.581vw;
  }
  .banner .typeWrap p.ldk {
    margin-right: 5.01vw;
  }
  .banner .typeWrap p.ldk span.largeChar {
    font-size: 5.039vw;
  }
  .banner .typeWrap p.ldk span.smallChar {
    font-size: 4.198vw;
  }
  .banner .typeWrap .area .areaTitle {
    font-size: 2.482vw;
  }
  .banner .typeWrap .area p .num {
    font-size: 5.878vw;
  }
  .banner .typeWrap .area p span.smallChar {
    font-size: 2.52vw;
  }
  .btn_virtualModelRoom {

    margin-top: 4.688vw;
    font-size: 3.307vw;
    padding: 3.385vw;

    width: 89.583%;
    max-width: none;
  }

  .pageCaption {
    width: 89.583%;
    padding: 7.552vw 0;
    margin: 0 auto;
    font-size: 2.604vw;
  }
}




.slide-item .caption{ font-family: 'EB Garamond', 'Cormorant Garamond', serif; font-size: 38px; line-height: 1.3; position: absolute; left: 0; bottom: 0; margin-left: 2%; margin-bottom: 2%; color: #ffffff; text-shadow: 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000; }
.slide-item .caption .s-size{ font-size: 70%; }
@media screen and (max-width: 768px){
  .slide-item .caption{ font-size: 6vw; }
}
