@charset "utf-8";
/**
 *
 *  ページ用CSS
 *  modelroom
 */
/*--------------------------------------------------------------------------
  Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
  Content
---------------------------------------------------------------------------*/

.inner02{
	max-width: 1500px;
	padding: 0 20px;
	margin: 0 auto;
}
main{
	position: relative;
	background-color: #030000;
	background-image: url('../images/bg_parts_l.png');
	background-repeat: no-repeat, no-repeat;
	background-position: top left;
	background-size: 25vw, 25vw;
}
main > .caption{
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 1.2rem;
	color: #223c14;
}
/*--------------------------------------------------------------------------
	mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	main {
		background: #030000 url('../images/bg_parts_r.png') no-repeat top right / 35vw;
	}
}
/*--------------------------------------------------------------------------
	Media Queries
---------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
	main{
		background-size: 35vw, 35vw;
		background-position: top right;
	}
}



/* kv
-----------------------------------------------------------------*/
.kv {
	position: relative;
	min-height: 638px;
	background: url(../images/mv.jpg) no-repeat center center;
	background-size: cover;
}
.kv h1 {
	position: absolute;
	left: 0;
	top: 40%;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 5rem;
	letter-spacing: .08em;
	font-weight: normal;
	line-height: 1;
	color: #FFFFFF;
	font-family: "EB Garamond", serif;
	text-shadow: 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4);
}
.kv .caption {
	position: absolute;
	right: 10px;
	bottom: 5px;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 0 0 5px #000, 0 0 5px #000;
}


/*--------------------------------------------------------------------------
  mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	/* kv
-----------------------------------------------------------------*/
	.kv {
		height: 50vw;
		min-height: inherit;
	}
	.kv h1 {
		top: 43%;
		font-size: 2.8rem;
	}
	.kv .caption {
		right: 5px;
		bottom: 2px;
		font-size: 1rem;
	}

}




	/* slider
-----------------------------------------------------------------*/
.slider_container{
	max-width: 1200px;
	margin: 0 auto;
}
.slider_container img {
	max-width: 100%;
	display: block;
	height: auto;
  }

  .slider_container {
	overflow: hidden;
	max-width: 1200px;
	width: 100%;
	margin: auto;
  }

#slider{
	margin-bottom: 50px;
}
#slider .slick-slide {
	margin: 0 5px; /* スライドの間隔 */
  }
  #slider li{
	position: relative;
  }
  #slider li span{
	position: absolute;
	bottom: 5px;
	right: 8px;
	color: #fff;
	font-size: 1.2rem;
  }


/* サムネイルスライダーのスタイル */
#thumbs {
	max-width:100%;
	margin:0 auto;
  }
  
  /* 現在表示中のサムネイルのデザイン */
  #thumbs .slick-current img {
	outline: 6px solid #9b9054;
	outline-offset: -6px;
  }
  #thumbs .slick-track {
	display: flex;
	/* justify-content: space-between; */
	/* flex-wrap: wrap !important; */
  }
  
  #thumbs .slick-slide {
	  width: calc(100% / 5) !important;
  }
  #thumbs li{
	position: relative;
  }
  #thumbs li span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1.3;
	z-index: 10;
	text-align: center;
	transition: .3s;
  }
  #thumbs .slick-current li::before{
	background: none;
  }
  #thumbs li:hover::before{
	background: none;
	cursor: pointer;
  }

  #thumbs li::before{
	position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(35, 24, 21, .7);
    transition: .3s;
    z-index: 1;
  }
 

  .prev-arrow,
  .next-arrow {
	  display: block;
	  width: 50px;
	  height: 50px;
	  transition: all .3s ease;
	  cursor: pointer;
	  position:relative;
  }
  
  .prev-arrow {
	  margin-right: 20px;
  }
  .slide-arrow {
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 80px;
	z-index: 999
  }
  .prev-arrow {
	left: 0px;
  }
  .next-arrow {
	right: 0px;
  }

  @media screen and (max-width : 768px ) {
	.ent_txt_area{
		padding: 0 20px;
	}
	#slider{
		margin-bottom: 10px;
	}
	#thumbs .slick-slide {
		width: calc(100% / 4) !important;
	}
	.slide-arrow{
		width: 60px;
	}
	#slider li span{
		font-size: 1rem;
		bottom: 3px;
	}
	#thumbs li span{
		font-size: 1.1rem;
		width: 90%;
	}
  }


/*--------------------------------------------------------------------------
  design
---------------------------------------------------------------------------*/

.design{
	color: #fff;
	padding: 8% 0 6%;
}
.design_img_wrap{
	display: flex;
	justify-content: flex-end;
}
.design_img_wrap02{
	display: flex;
	justify-content: flex-start;
	margin-top: 6%;
}
.design_img{
	flex-basis: 74.5%;
	max-width: 1315px;
}
.design_img_wrap02 .design_img{
	flex-basis: 60%;
}
.design_ttl{
	/* flex-basis: 17% ; */
	writing-mode: vertical-rl;
	font-family: "EB Garamond", serif;
	letter-spacing: 4px;
	font-size: 4.2rem;
	line-height: 1.6;
	font-weight: 300;
	text-align: end;
}
.design_img_wrap02 .design_ttl{
	text-align: start;
}
.design_ttl span{
	padding-top: 200px;
	display: block;
}

.design_txt_wrap{
	margin-top: 4%;
}
.design_txt_wrap .en{
	font-family: "EB Garamond", serif;
	font-weight: normal;
	color: #9b9054;
	font-size: 2.4rem;
	letter-spacing: 1px;
}
.design_txt_wrap h3{
	font-size: 3rem;
	line-height: 1.6;
	letter-spacing: .1em;
	font-weight: 300;
}
.design_txt_wrap h3 + p{
	font-size: 1.4rem;
	letter-spacing: .1em;
	line-height: 2;
	margin-top: 20px;
}
.ent{
	position: relative;
}

.ent_txt{
	color: #fff;
	/* max-width: 300px; */
	padding: 8% 0 6%;
	margin: auto;
	/* writing-mode: vertical-rl; */
    letter-spacing: 4px;
    font-size: 3.2rem;
	text-align: center;
    line-height: 1.6;
    font-weight: 300;
    text-shadow: 0px 0px 7px #000, 0px 0px 7px #000;
}
.img_ttl{
	text-align: center;
	font-family: "EB Garamond", serif;
    font-weight: normal;
    color: #9b9054;
    font-size: 3.0rem;
	padding-bottom: 8px;
    letter-spacing: 20px;
	text-shadow: 0px 0px 7px #000, 0px 0px 7px #000;
}


@media screen and (max-width: 768px) {
	.design{
		padding: 20% 0 25%;
	}

	.design_img{
		flex-basis: 100%;
	}

	.design_ttl{
		flex-basis: 20%;
		max-width: 300px;
		/* margin: auto; */
		font-size: 2rem;
		max-height: 260px;
		padding-right: 5px;
	}
	.design_ttl span{
		padding-top: 70px;
		display: block;
	}
	
	.design_txt_wrap{
		margin-top: 12%;
	}
	.design_txt_wrap .en{
		font-size: 1.6rem;
	}
	.design_img_wrap02{
		margin-top: 10%;
	}
	.design_img_wrap02 .design_img {
		flex-basis: 75%;
	}
	.design_img_wrap02 .design_ttl{
		flex-basis: 10%;
		margin: unset;
		margin-bottom: auto;
		padding-left: 7px;
	}

	.ent_txt{
		font-size: 2rem;
		padding-top: 16%;
		padding-bottom: 16%;
	}
	.img_ttl{
		font-size: 1.8rem;
		padding-bottom: 8px;
		letter-spacing: 6px;
		text-shadow: 0px 0px 7px #000, 0px 0px 7px #000;
	}

}


/*--------------------------------------------------------------------------
	.design.contents02
---------------------------------------------------------------------------*/

.design.contents02{
	color: #9b9054;
	position: relative;
	background-color: #030000;
	background-image: url('../images/bg.jpg');
}
.design.contents02::before{
	position: absolute;
	content: "";
	display: inline-block;
	background-image: url('../images/bg_parts_r.png');
	background-repeat: no-repeat, no-repeat;
	background-size: contain;
	width: 25vw;
	height: 25vw;
	right: 0;
	top: 0;
}

.design.contents02 .ent_txt{
	text-align: left;
}
.design.contents02 .design_img {
    flex-basis: 85%;
	max-width: 1315px;
}
.design.contents02 .design_img_wrap{
	justify-content: left;
}
.design.contents02 .flex{
	display: flex;
	justify-content: space-between;
	margin-top: 5%;
}
.design.contents02 .flex .bath{
	margin-right: 5%;
}
.design.contents02 .flex h2{
	font-family: "EB Garamond", serif;
    font-weight: normal;
    font-size: 4rem;
	padding-bottom: 8px;
    letter-spacing: 5px;
}


@media screen and (max-width: 768px) {
	.design.contents02::before{
	width: 35vw;
	height: 35vw;
	}
	.design.contents02 .ent_txt{
		padding-top: 10%;
	}
	.design.contents02 .design_img{
		width: 100%;
	}
	.design.contents02 .design_ttl{
		margin: unset;
		flex-basis: 15%;
		line-height: 1;
		margin-top: auto;
		text-align: right;
	}
	.design.contents02 .flex h2{
		font-size: 2rem;
		line-height: 1;
		margin-top: 10px;
	}
}



/*--------------------------------------------------------------------------
	.design.contents03
---------------------------------------------------------------------------*/
.design.contents03 {
	position: relative;
	background-color: #030000;
	background-image: url('../images/bg_parts_l.png');
	background-repeat: no-repeat, no-repeat;
	background-position: top left;
	background-size: 25vw, 25vw;
}
.design.contents03 .ent_txt{
	text-align: right;
}
.design.contents03 .design_img {
    flex-basis: 75.6%;
	max-width: 1315px;
}
.design.contents03 .flex{
	display: flex;
	justify-content: space-between;
	margin-top: 5%;
	max-width: 1700px;
	margin-left: auto;
}
.design.contents03 .flex .corner{
	margin-right: 5%;
}
.design.contents03 .flex h2{
	font-family: "EB Garamond", serif;
    font-weight: normal;
    font-size: 4rem;
	padding-bottom: 8px;
    letter-spacing: 5px;
}

@media screen and (max-width: 768px) {
	.design.contents03{
		background-size: 35vw, 35vw;
		background-position: top left;
	}
	.design.contents03 .ent_txt{
		padding-top: 10%;
	}
	.design.contents03 .design_img{
		width: 100%;
	}
	.design.contents03 .design_ttl{
		margin: unset;
		flex-basis: 15%;
		line-height: 1;
		margin-top: auto;
		text-align: right;
		margin-right: 10px;
	}
	.design.contents03 .flex{
		padding-left: 20px;
	}
	.design.contents03 .flex h2{
		font-size: 2rem;
		line-height: 1;
		margin-top: 10px;
	}
}