@charset "utf-8";
/* CSS Document */
/* 共通部分
------------------------------- */
body {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}


article {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  color: #333333;
  font-size: 1.6rem;
  letter-spacing: 0.5rem;
  line-height: 1.8;
  text-align: justify;
  vertical-align: baseline;
  font-family: "Hina Mincho", serif;
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
	text-justify: inter-ideograph;
  margin: 0;
  padding: 0;
  border: 0;
  overflow:clip;
  /*overflow: hidden;*/
  /*background-color: #D9D4CC;*/
  background-color: #eee9e6;
  background-image: url(https://www.transparenttextures.com/patterns/snow.png);
}

article img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

section{
	max-width: 100% !important;
}

.pc_only {
  display: block;
}
.sp_only {
  display: none;
}

.tablet{
  display: none;
}

.l-960{
	max-width: 960px;
	margin-inline:auto;
	padding-inline:40px;
}

.l-1200{
	max-width: 1200px;
	margin-inline:auto;
	padding-inline:40px;
}

.w70{
	width: 70%;
	margin-inline:auto;
	padding-top: 200px;
	padding-bottom: 240px;
}

.w80{
	width: 85%;
	margin-inline:auto;
}

.section_wrap{
	padding-block:250px;
}

.titleWrap{
	display: flex;
	justify-content: flex-end;
	gap:200px;
	margin-bottom: 150px;
}

.title_imgWrap{
	width: 55vw;
	position: relative;
}

.title_imgSentence{
	position: absolute;
	font-size: 24px;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	font-feature-settings: initial; /* または "palt" など、目的の機能に合わせて変更 */
	color: #fff;
	bottom:20%;
	left: 20%;
	
}

.title_img{
	width: 100%;
}

.c-title_Wrap{
	padding-top: 100px;
	position: relative;
}

.c-title{
   font-size: 36px;
   line-height: 1.5;
   position: relative;
   letter-spacing: 0.25rem;
}

.c-title::before{
	content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('../img/piece01.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
	padding-right: 30px;
}

.c-title::after{
	position: absolute;
	content: '';
    width: 600px;
    height: 1px;
    display: inline-block;
    background-color: #333;
    bottom: -20px;
    left: 0;
}

.c-title_en{
   font-family: "Crimson Pro", serif;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
   font-size: 24px;
   letter-spacing: 0.05rem;
   padding-left: 40px;
}

.en{
   font-family: "Crimson Pro", serif;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
   letter-spacing: 0.05rem;
}



@media screen and (max-width: 820px){
	.tablet{
	  display: block;
	}
	
	#gFooter{
		margin-top: 0 !important;
	}
	
	.titleWrap{
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		gap:20px;
		margin-bottom: 80px;
	 }
	
	.c-title_Wrap{
		padding-top: 0px;
		position: relative;
	}
	
	.title_imgWrap{
		width: 100vw;
		position: relative;
		height: 500px;
	}
	
	.c-title{
		text-align: left;
		line-height: 1.5;
		position: relative;
		margin-bottom: 40px;
		width: 90%;
		margin-inline:auto;
	  }
	
	.c-title::after{
		position: absolute;
		content: '';
		width: 120%;
		height: 1px;
		display: inline-block;
		background-color: #333;
		bottom: -20px;
		left: 0;
	}
	
	.section_wrap{
		padding-block:200px;
	}

}

@media screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block;
  }
	
  .tablet{
	  display: block;
	}
	
  .c-title{
    font-size: 24px;
    text-align: left;
    line-height: 1.5;
    position: relative;
    margin-bottom: 40px;
	width: 90%;
	margin-inline:auto;
  }
	
  .l-960{
	max-width: 960px;
	margin-inline:auto;
	padding-inline:30px;
	padding-top:0px;
	padding-bottom: 0px;
  }
	
  .w70{
	width: 85%;
	margin-inline:auto;
	padding-top: 0px;
	padding-bottom: 0px;
  }
	
  .w80{
	width: 85%;
	margin-inline:auto;
	padding-top: 0px;
	padding-bottom: 0px;
  }
	
  .c-title_en{
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 0.1rem;
    padding-left: 20px;
  }

	.title_imgSentence{
		position: absolute;
		font-size: 14px;
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		font-feature-settings: initial; /* または "palt" など、目的の機能に合わせて変更 */
		color: #fff;
		bottom:20%;
		left: 20%;

	}

	.title_img{
		width: 100%;
		height: 300px;
		object-fit: cover;
	}

	.c-title_Wrap{
		padding-top: 0px;
		position: relative;
	}
	
	.titleWrap{
		margin-bottom: 60px;
	 }
	
	.title_imgWrap{
		width: 100vw;
		position: relative;
		height: 300px;
	}

	

}
/* 順番 
1.位置情報系＝position, top, right, z-index, display, float等
2.サイズ＝width, height, padding, margin
3.文字系＝font, line-height, letter-spacing, color- text-align等
4.背景＝background, border等
5.その他＝animation, transition等
*/



/* responsive img
------------------------------- */
/*中央揃えにするためのcss*/
picture img {
    display: block;
    /*max-width: 960px;*/
    width: 100%;
    margin: 0 auto;
}
/*スマホ表示*/
@media screen and (max-width: 768px) {
   picture img {
    width: 96%;
  }
}


/* top
------------------------------- */

.top_wrap{
	width: 100%;
	height: 120svh;
	position: relative;
}

.top_logo{
	position: absolute;
	bottom:30%;
	right: 20%;
	transform: rotate(-15deg);
}

.top_logoImg{
	width: 500px;
}

.top_slider{
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.top_sliderImgBox{
	height: 120svh;
}

.top_sliderImg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}

.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.top_titleWrap{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-align: center;
}

.top_title{
	font-size: 54px;
	letter-spacing: 0.5rem;
}

.top_subTitle{
	font-size: 32px;
}

@media screen and (max-width: 820px) {
	
}

@media screen and (max-width: 768px){
	
	.top_wrap{
		width: 100%;
		height: 90svh;
		position: relative;
	}

	.top_logo{
		position: absolute;
		bottom:20%;
		right: 10%;
		transform: rotate(-15deg);
	}

	.top_logoImg{
		width: 280px;
	}

	.top_slider{
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.top_sliderImgBox{
		height: 90svh;
	}

	.top_sliderImg{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.top_titleWrap{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		text-align: center;
	}

	.top_title{
		font-size: 32px;
		letter-spacing: 1rem;
		line-height: 1.5;
		margin-bottom: 10px;
		letter-spacing: 0.5rem;
	}

	.top_subTitle{
		font-size: 20px;
	}

	
}

/* openHouse
------------------------------- */

.openHouse{
	background-color: #3E4048;
	color: #fff;
	background-image:url(https://www.transparenttextures.com/patterns/snow.png);
}

.openHouse_wrap{
	width: 90%;
	margin-inline:auto;
	padding-block:60px;
	max-width: 1500px;
}

.openHouse_flex{
	display: flex;
	justify-content: space-between;
	gap:40px;
}

.openHouse_titleWrap{
	text-align: center;
}

.openHouse_title{
	font-size: 28px;
	position: relative;
	display: flex;
	align-items: center;
	letter-spacing: 0.25rem;
}

.openHouse_title::before{
	content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('../img/piece01.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
	padding-right: 15px;
}

.openHouse_subTitle{
	font-size: 24px;
	text-align: left;
	margin-left: 40px;
}

.openHouse_dateWrap{
	font-size: 24px;
}

.openHouse_textTitle{
	font-size: 24px;
}

.openHouse_text{
	padding-left:1em;
	text-indent:-1em;
}

@media screen and (max-width: 820px){
	.openHouse_flex{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
}

@media screen and (max-width: 768px){
	.openHouse{
		background-color: #3E4048;
		color: #fff;
		background-image:url(https://www.transparenttextures.com/patterns/snow.png);
	}

	.openHouse_wrap{
		width: 85%;
		margin-inline:auto;
		padding-block:40px;
		max-width: 1400px;
	}

	.openHouse_titleWrap{
		text-align: center;
		margin-bottom: 20px;
	}

	.openHouse_title{
		font-size: 20px;
		position: relative;
		display: flex;
		align-items: center;
	}

	.openHouse_title::before{
		content: "";
		display: inline-block;
		width: 22px;
		height: 22px;
		background-image: url('../img/piece01.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		padding-right: 15px;
	}

	.openHouse_subTitle{
		font-size: 20px;
		line-height: 1.5;
	}

	.openHouse_dateWrap{
		font-size: 20px;
	}

	.openHouse_textTitle{
		font-size: 20px;
	}
	
	.openHouse_flex{
		gap:0px;
	}
}



/* concept
------------------------------- */

.concept_wrap{
	align-items: center;
	display: flex;
	flex-direction: column;
	padding-top: 350px;
}

.concept_title{
	font-size: 32px;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
/* IE対応 */
	position: relative;
	margin-bottom: 60px;
	font-feature-settings: initial; /* または "palt" など、目的の機能に合わせて変更 */
}

.concept_title::before{
	content: "";
    display: inline-block;
    width: 110px;
    height: 110px;
    background-image: url('../img/illust.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
	top: -150px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.concept_subTitle{
	position: relative;
	font-size: 24px;
}

.concept_subTitle::after{
	content: "";
    display: inline-block;
    width: 100px;
    height: 20px;
    background-image: url('../img/piece02.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
}

.concept_textWrap{
	text-align: center;
	margin-top: 120px;
	font-size: 16px;
	margin-bottom: 80px;
}

.concept_text{
	margin-bottom: 40px;
}

.concept_imgWrap{
	padding-bottom: 200px;
}


@media screen and (max-width: 820px) {
	
}

@media screen and (max-width: 768px) {
	.concept_wrap{
		align-items: center;
		display: flex;
		flex-direction: column;
		padding-top: 180px;
		padding-bottom:80px;
	}

	.concept_title{
		font-size: 24px;
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
	/* IE対応 */
		position: relative;
		margin-bottom: 20px;
		font-feature-settings: initial; /* または "palt" など、目的の機能に合わせて変更 */
	}

	.concept_title::before{
		content: "";
		display: inline-block;
		width: 80px;
		height: 80px;
		background-image: url('../img/illust.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: -110px;
		left: 50%;
		transform: translateX(-50%);
	}

	.concept_subTitle{
		position: relative;
		font-size: 18px;
	}

	.concept_subTitle::after{
		content: "";
		display: inline-block;
		width: 80px;
		height: 20px;
		background-image: url('../img/piece02.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		bottom: -30px;
		left: 50%;
		transform: translateX(-50%);
	}

	.concept_textWrap{
		text-align: center;
		margin-top: 60px;
		font-size: 16px;
		margin-bottom: 20px;
	}

	.concept_text{
		margin-bottom: 20px;
	}

	.concept_imgWrap{
		padding-bottom: 0px;
	}


}


/* parallax
------------------------------- */

.parallax_wrap{
	width: 100vw;
	height: 500px;
	overflow: hidden;
}

.parallax_wrap.last{
	height: 800px;
}

.parallax_img{
	width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center center;
}

.last .parallax_img{
	height: 800px;
}

@media screen and (max-width: 768px){
	.parallax_wrap{
		width: 100vw;
		height: 300px;
		overflow: hidden;
	}
	
	.parallax_wrap.last{
		height: 300px;
	}

	.parallax_img{
		width: 100%;
		height: 300px;
		object-fit: cover;
		object-position: center center;
	}
	
	.last .parallax_img{
		height: 300px;
	}
	
}


/* point
------------------------------- */

#point{
	margin-top: 200px;
	margin-bottom: 200px;
}

/*ラッパー要素*/
  #point .wrapper{
    	display: flex;
    	justify-content: space-between;
    	position: relative;
  }

  /*コンテンツのブロック*/
  #point .point{ width: 40vw; }

  #point .point div{ 
	padding-top: 50vh;
	/*padding-right:100px;*/
	max-width: 500px;
  }

  #point .point div:last-child{ padding-bottom: 50vh; }
  #point .point h2{
	font-size: 3rem;
	line-height: 1.8em;
	margin-bottom:100px;
	position: relative;
	writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
	font-feature-settings: initial;
}

#point .point h2::before{
	position:absolute;
	content: "";
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('../img/illust.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
}

#point .point h2::after{
	position:absolute;
	content: "";
    display: inline-block;
    width: 120px;
    height: 20px;
    background-image: url('../img/piece02.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}

  /*画像のブロック*/
  #point .images{
    	width: 50vw;
    	height: 100vh;
    	display: flex;
    	align-items: center;
    	position: sticky;
    	position: -webkit-sticky;
    	top:0;
  }

#point .images img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}

  #point .images p {
    	/*height: 400px;*/
    	margin: auto;
    	display: block;
    	visibility: hidden;
    	/* 画像が透過pngの時は背景色が必要です*/
    	/*background: #5bd2d2;*/
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	/* フェード速度 */
    	transition: .8s;
    	opacity: 0;
	    width: 100%;
    }

  #point .images p:first-child,
  #point .images p.active {
    	visibility: visible;
    	opacity: 1;
  }

.point p{
	margin-bottom: 20px;
}

@media screen and (max-width: 820px){
	/*コンテンツのブロック*/
  	#point .point{
		width: 40vw; 
		margin-right: 40px;
	}
}

/*スマホ表示*/
@media screen and (max-width: 768px) {
	#point{
		margin-top: 180px;
		margin-bottom: 60px;
	}
	
	#point .point{
		width: 100% !important;
		max-width: 100%;
		margin-right: 0px;
	}
	
	.scroll-box01,
	.scroll-box02,
	.scroll-box03{
		position: relative;
	}
	
	#point .point div{
		width: 85%;
		margin-inline:auto;
		padding-top:0vh;
		margin-bottom: 200px;
		max-width: 100%;
	}
	
	#point .point div:last-child{ 
		padding-bottom: 0 !important; 
		margin-bottom: 0px;
	}
	
	#point .point h2{
		/*-ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;*/
		font-size: 20px;
		position: absolute;
		top: -60px;
		left: 0;
		text-shadow: 2px 2px #fff;
		z-index: 10;
	}
	
	#point .point .point_imgWrap{
		width: 100%;
		height: 240px;
		margin-bottom: 40px;
	}
	
	#point .point_img{
		width: 100%;
		height: 240px;
		object-fit: cover;
	}
	
	#point .point h2::before{
		position:absolute;
		content: "";
		display: inline-block;
		width: 60px;
		height: 60px;
		background-image: url('../img/illust.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		top: -80px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}
	
	#point .point h2::after{
		position:absolute;
		content: "";
		display: inline-block;
		width: 80px;
		height: 20px;
		background-image: url('../img/piece02.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		bottom: -40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}
}



@media screen and (max-width: 820px){
	
}
	
@media screen and (max-width: 768px){
	
}
	

/* property
------------------------------- */

.property.section_wrap{
	padding-bottom:350px;
}

.sliderArea{
	position: relative;
}

#property .slick-track{
	display: flex;
}

#property .slick-slide{
	height: auto !important;
}
	
.property_slide-items {
    width: 100%;
    display: flex;
	border-bottom: 1px solid #333;
	border-top:1px solid #333;
  
}
	
.sliderItem{
	padding: 40px;
	background-color: rgba(255,255,255,0.5);
	border-right: 1px solid #333;
	position: relative;
}

.slider_title{
	font-size: 20px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #333;
	text-align: center;
}

.slider_number{
	font-size: 40px;
	position: absolute;
	left: 2%;
	top:2%;
	color: #333;
	height:60px;
    width:60px;
    border-radius:50%;
    line-height:50px;
    text-align:center;
	border: 1px solid #333;
	background-color: #fff;
	font-weight: 300;
	
}

.slider_imgWrap{
	margin-bottom: 40px;
}

/*.arrow_boxWrap{
	position: absolute;
	bottom:-10%;
	left: 50%;
}*/

.property_arrow-box{
    display: flex;
    align-items: center;
	gap:20vw;
	justify-content: space-between;
    margin: 20px 0 0;
    position: absolute;
	bottom:-12%;
	left: 50%;
	transform: translateX(-50%);
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
	text-align: center;
	background-color: rgba(255,255,255,0.5);
	border: 1px solid #333;
}

.prev-arrow:hover{
	background-color: #fff;
}

.next-arrow:hover{
	background-color: #fff;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:10px;
    height:10px;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}

@media screen and (max-width: 820px){
	.sliderArea{
		position: relative;
		margin-inline:20px;
		border-left: 1px solid #333;
	}
	
	.property.section_wrap{
		padding-bottom:250px;
		padding-top:200px;
	}
}

@media screen and (max-width: 768px){
	.property.section_wrap{
		padding-bottom:150px;
		padding-top:80px;
	}

	#property .slick-track{
		display: flex;
	}

	#property .slick-slide{
		height: auto !important;
	}

	.property_slide-items {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #333;
		border-top:1px solid #333;

	}

	.sliderItem{
		padding: 40px;
		padding-inline:30px;
		background-color: rgba(255,255,255,0.5);
		border-right: 1px solid #333;
		position: relative;
	}

	.slider_title{
		font-size: 20px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #333;
		text-align: center;
	}

	.slider_number{
		font-size: 40px;
		position: absolute;
		left: 2%;
		top:2%;
		color: #333;
		height:60px;
		width:60px;
		border-radius:50%;
		line-height:50px;
		text-align:center;
		border: 1px solid #333;
		background-color: #fff;
		font-weight: 300;

	}

	.slider_imgWrap{
		margin-bottom: 20px;
	}

	/*.arrow_boxWrap{
		position: absolute;
		bottom:-10%;
		left: 50%;
	}*/

	.property_arrow-box{
		display: flex;
		align-items: center;
		gap:20vw;
		justify-content: space-between;
		margin: 20px 0 0;
		position: absolute;
		bottom:-15%;
		left: 50%;
		transform: translateX(-50%);
	}

	.prev-arrow,
	.next-arrow {
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		transition: all .3s ease;
		cursor: pointer;
		position:relative;
		text-align: center;
		background-color: rgba(255,255,255,0.5);
		border: 1px solid #333;
	}

	.prev-arrow:hover{
		background-color: #fff;
	}

	.next-arrow:hover{
		background-color: #fff;
	}

	.prev-arrow {
		transform: rotate(180deg);
		margin-right: 20px;
	}

	.prev-arrow::before,
	.next-arrow::before{
		position:absolute;
		content: "";
		width:10px;
		height:10px;
		border-right: 1px solid #333;
		border-top: 1px solid #333;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		transform:rotate(45deg);
	}
	
}
	
/* plan
------------------------------- */
	
.plan{
	background-color: #3E4048;
	color: #fff;
	background-image:url(https://www.transparenttextures.com/patterns/snow.png);
}

#plan .c-title::after {
    position: absolute;
    content: '';
    width: 600px;
    height: 1px;
    display: inline-block;
    background-color: #fff;
    bottom: -20px;
    left: 0;
}

#plan .title_imgSentence {
    position: absolute;
    font-size: 24px;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    font-feature-settings: initial;
    color: #fff;
    bottom: 20%;
    right: 20%;
}

.plan_body{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 200px;
}

.plan_imgWrap{
	width: 55%;
}

.plan_textWrap{
	width: 40%;
}

.plan_title{
	font-size: 32px;
	margin-bottom: 60px;
}

#photo .c-title{
	margin-bottom: 60px;
}

#photo .c-title::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    display: inline-block;
    background-color: #fff;
    bottom: -20px;
    left: 0;
}

#photo .fotorama {
  /*max-width: 960px;
  margin: 50px auto;*/
  margin-inline:auto;
}

#photo .fotorama__img{
	left: 0 !important;
}

@media screen and (max-width: 820px){
	
	.plan_body{
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 80px;
	}
	
	.plan_imgWrap{
		width: 100%;
	}

	.plan_textWrap{
		width: 100%;
		margin-bottom: 20px;
	}
	
	#plan .c-title::after {
		width: 120%;
	}
	
	#photo .c-title::after {
		width: 120%;
	}	

}

@media (max-width: 768px){
  #plan.section_wrap{
		padding-block: 80px;
  }
	
  #plan .c-title::after {
		position: absolute;
		content: '';
		width: 120%;
		height: 1px;
		display: inline-block;
		background-color: #fff;
		bottom: -20px;
		left: 0;
	}

	#plan .title_imgSentence {
		position: absolute;
		font-size: 14px;
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		font-feature-settings: initial;
		color: #fff;
		bottom: 20%;
		right: 20%;
	}
	
	.plan_body{
		padding-bottom: 60px;
	}

	.plan_title{
		font-size: 20px;
		margin-bottom: 30px;
	}

	#photo .c-title{
		margin-bottom: 60px;
	}

	#photo .c-title::after {
		position: absolute;
		content: '';
		width: 120%;
		height: 1px;
		display: inline-block;
		background-color: #fff;
		bottom: -20px;
		left: 0;
	}

  #photo .fotorama {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* area
------------------------------- */

#area.section_wrap{
	padding-bottom: 350px;
}

.area_body{
	margin-bottom: 150px;
}

.area_map{
	margin-bottom: 60px;
}

#area .slick-track{
	display: flex;
}

#area .slick-slide{
	height: auto !important;
}

.slider_title .small{
	font-size: 14px;
	display: block;
}
	
.area_slide-items {
    width: 100%;
    display: flex;
	border-bottom: 1px solid #333;
	border-top:1px solid #333;
}

.area_arrow-box{
    display: flex;
    align-items: center;
	gap:20vw;
	justify-content: space-between;
    margin: 20px 0 0;
    position: absolute;
	bottom:-12%;
	left: 50%;
	transform: translateX(-50%);
}


@media screen and (max-width: 820px){
	#area.section_wrap{
		padding-bottom: 250px;
	}
	
	.area_body{
		margin-bottom: 80px;
	}

}

@media screen and (max-width: 768px){
	#area.section_wrap{
		padding-bottom: 150px;
		padding-top: 80px;
	}

	.area_body{
		margin-bottom: 60px;
	}

	.area_map{
		margin-bottom: 40px;
	}

	#area .slick-track{
		display: flex;
	}

	#area .slick-slide{
		height: auto !important;
	}

	.slider_title .small{
		font-size: 14px;
		display: block;
	}

	.area_slide-items {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #333;
		border-top:1px solid #333;
	}

	.area_arrow-box{
		display: flex;
		align-items: center;
		gap:20vw;
		justify-content: space-between;
		margin: 20px 0 0;
		position: absolute;
		bottom:-15%;
		left: 50%;
		transform: translateX(-50%);
	}
	
}


/*--------------------------------------------------
virtualtour バーチャル内覧
----------------------------------------------------*/

#virtualtour .c-title{
	margin-bottom: 60px;
}

#virtualtour .c-title::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    display: inline-block;
    background-color: #333;
    bottom: -20px;
    left: 0;
}


.virtualtour_text{
	margin-inline:auto;
	text-align: center;
	margin-bottom: 40px;
}

.vrbox {
	width: 100%;
	margin: 0 auto;
}


.vrbox iframe {
    height: 600px;
	display: block;
}

/*スマホ表示*/
@media screen and (max-width: 820px) {
	#virtualtour .c-title_en{
		padding-left: 60px;
	  }
}

@media screen and (max-width: 768px){
	#virtualtour .c-title::after{
		position: absolute;
		content: '';
		width: 120%;
		height: 1px;
		display: inline-block;
		background-color: #333;
		bottom: -20px;
		left: 0;
	}
	
	.virtualtour.section_wrap{
		padding-block:100px;
	}
	
	.virtualtour_text{
		width: 100%;
		margin-inline:auto;
		text-align: center;
		margin-bottom: 20px;
	}

	.vrbox {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		background-color: #fff;
		padding: 10px;
		position: relative;
	}
	
	.vrbox iframe {
		height: 400px;
	  }
}

/* details
------------------------------- */

#details .c-title{
	margin-bottom: 100px;
}

#details .c-title::after {
    position: absolute;
    content: '';
    width: 40%;
    height: 1px;
    display: inline-block;
    background-color: #fff;
    bottom: -20px;
    left: 0;
}

.details{
	background-color: #3E4048;
	color: #fff;
	background-image:url(https://www.transparenttextures.com/patterns/snow.png);
}

.details_bodyWrap{
	max-width: 1100px;
	margin-inline:auto;
	position: relative;
}

.details_body{
	margin-bottom: 80px;
}

tbody{
	padding: 80px;
}
table {
  box-sizing: border-box;
  border-collapse: collapse;
  margin: 0 auto;
  margin-block-start: 30px;
  /*padding: 60px;*/
}
table th, table td {
  border-block-end: 1px solid #fff;
  padding-inline-start: 8px;
  padding-block-start: 8px;
  margin-block-start: 8px;
  vertical-align: middle;
  font-style: normal;
  height: 3em;
  text-align: left;
}
table th {
  width: 25%;
  font-weight: 600;
}

a.pro{
	color: #fff;
	display: inline-block;
	border-bottom: 1px solid #fff;
}

a.pro:hover{
	opacity: 0.5;
}

.button_inquiry a {
  font-size: 20px;
  letter-spacing: 0.2em;
  color: #333;
  outline: 1px solid #333;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  z-index:999;
  transition: all 0.3s;
}

.button_inquiry a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #eee9e6;
  z-index:-999;
  transition: all 0.3s ease;
}

.button_inquiry a:hover::before {
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.gmap {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  margin-block-end: 50px;
  margin-top: 100px;
}
.gmap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: 0.4s;
}

.gmap iframe:hover{
  transition: 0.4s;filter: none;
  -webkit-filter: none;
}

@media (max-width: 820px) {
	#details .c-title::after {
    	width: 120%;
	}

	
}

@media screen and (max-width: 768px){
	
	#details.section_wrap{
		padding-block:80px;
	}
	
	  table {
		width: 100%;
	  }
	  table th, table td {
		display: inline-block;
		height: auto;
		border-block-end: 0px;
	  }
	  table th {
		width: 100%;
		background-color: #eee9e6;
		color: #333;
	  }
	
	#details .c-title{
		margin-bottom: 60px;
		text-align: left;
	}

	#details .c-title::after {
		position: absolute;
		content: '';
		width: 120%;
		height: 1px;
		display: inline-block;
		background-color: #fff;
		bottom: -20px;
		left: 0;
	}
	
	.button_inquiry a {
	  font-size: 20px;
	  letter-spacing: 0.2em;
	  color: #333;
	  outline: 1px solid #333;
	  display: block;
	  position: relative;
	  box-sizing: border-box;
	  max-width: 300px;
	  text-align: center; 
	  padding: 16px 64px;
	  margin: 24px;
	  margin-inline: auto;
	  text-decoration: none;
	  cursor: pointer;
	  z-index:999;
	  transition: all 0.3s;
	}
	
	.details_body{
		margin-bottom: 40px;
	}
	
	.gmap {
	  position: relative;
	  width: 100%;
	  height: 300px;
	  margin: 0 auto;
	  margin-block-end: 0px;
	  margin-top: 60px;
	}

	
}


/* inquiry_image
------------------------------- */

/*.inquiry_image{
	height: 800px;
	position: relative;
	overflow: hidden;
}

.inquiry_image:hover .inquiry_rightImg{
	transform: scale(1.05); 
	opacity: 1;
}

.inquiry_rightImg{
	object-fit: cover;
	width: 100%;
	height: 100%;
	object-position: center;
	transition: transform .6s ease; 
}

.inquiry_title{
	position: absolute;
	color: #fff;
	font-size: 54px;
	top: 15%;
	left: 10%;
}

.inquiry_title::before{
	content: '';
	display: inline-block;  
	background-image: url("../img/piece01.svg");
	background-size: contain;
	background-position: center;
    background-repeat: no-repeat;
	width:40px;
    height: 40px;
	margin-right: 20px;
}


.inquiry_title .c-title_en{
	font-size: 32px;
}

@media (max-width: 768px){
	.inquiry_image{
		height: 400px;
		position: relative;
		overflow: hidden;
	}

	.inquiry_image:hover .inquiry_rightImg{
		transform: scale(1.05); 
		opacity: 1;
	}

	.inquiry_rightImg{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: center;
		transition: transform .6s ease;;
	}

	.inquiry_title{
		position: absolute;
		color: #fff;
		font-size: 24px;
		top: 15%;
		left: 10%;
		letter-spacing: 0.3rem;
	}

	.inquiry_title::before{
		content: '';
		display: inline-block;  
		background-image: url("../img/piece01.svg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		width:20px;
		height: 20px;
		margin-right: 10px;
	}


	.inquiry_title .c-title_en{
		font-size: 16px;
		padding-left: 10px;
	}
}*/




/* inquiry
------------------------------- */

/*.inquiry_center{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    cursor: pointer;
    transition: all .3s ease;
	transition: 3s 0s;
    font-size: 16px;
    padding-inline:30px;
	padding-block:5px;
	background-color: #BFB8AC;
	border-radius: 30px;
	letter-spacing: 0.2rem;
}*/

/*.inquiry_centerLinkItem .small{
	font-size: 12px;
	padding-left: 5px;
}*/


/*=========
.in_fixed
=========*/

.inquiry_center {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    cursor: pointer;
    transition: all .3s ease;
	/*transition: 1s;*/
    font-size: 16px;
    padding-inline:30px;
	padding-block:5px;
	background-color: #BFB8AC;
	border-radius: 30px;
	letter-spacing: 0.2rem;
	opacity: 0;
	/*display: none;*/
}

.in_fixed_bottom[aria-expanded=false] {
  /*bottom: -200px;*/
  opacity: 0;
  transition: 1s;
}

.in_fixed_bottom[aria-expanded=true] {
  /*bottom: 0;*/
  opacity: 1;
  transition: 1s;
}

.in_fixed_bottom:hover{
  opacity: 0.5;	
}

.inquiry_centerLinkItem .small{
	font-size: 12px;
	padding-left: 5px;
}

@media (max-width: 768px){
	.in_fixed_bottom {
		position: fixed;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 150;
		cursor: pointer;
		transition: all .3s ease;
		/*transition: 1s;*/
		font-size: 14px;
		padding-inline:20px;
		padding-block:2px;
		background-color: #BFB8AC;
		border-radius: 30px;
		letter-spacing: 0.2rem;
		opacity: 0;
	}

	
}


/* pagetop
------------------------------- */
.pagetop {
  position: fixed;
  bottom: 5%;
  right: 10px;
  z-index: 150;
  cursor: pointer;
  transition: all .3s ease;
  width: 150px;
  /*display: block;*/
}

.pagetop_img{
	width: 100%;
}

.pagetop:hover{
	transform: scale(1.1);
}

.shake-up {
    animation: shake-up 3s infinite ease-in-out;
}

@keyframes shake-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

@media (max-width: 768px){
	.pagetop {
	  position: fixed;
	  bottom: 2%;
	  right: 5px;
	  z-index: 150;
	  cursor: pointer;
	  transition: all .3s ease;
	  width: 90px;
	}
}


/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translate(60%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_left {
  opacity: 0;
  transform: translate(-60%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn {
  opacity: 0;
  transition: 3s 0s;
}

.fadeIn02 {
  opacity: 0;
  transition: 3s 0.5s;
}

.fadeIn03 {
  opacity: 0;
  transition: 3s 3s;
}

.fadeIn.is-show {
  opacity: 1;
}

.fadeIn02.is-show {
  opacity: 1;
}

.fadeIn03.is-show {
  opacity: 1;
}

.animate{
  transform: translateY(10px);
  transition: all 1.0s;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

.animate.show:nth-of-type(1) {
  transition-delay: 0s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.1s;
}

.fadein_order {
  opacity: 0;
  transition: all .5s ease-in-out .5s;
}

.fadein_order.active{
  opacity: 1;
}