/*--------------------------------------------------
 common 共通の設定
----------------------------------------------------*/
#topicpathWrapper {
  display: none;
}
.pcOnly {
  display: none;
}
.spOnly {
  display: block;
}
h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.box950 {
  max-width: 950px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.box1080 {
  max-width: 1080px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.txt {
  margin-top: 50px;
  margin-bottom: 50px;
  /*line-height: 2;*/
}
#contesntsWrapper {
  top: 0;
}
div#contents {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
article {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #000;
    font-size :1.5rem;
  font-weight: 400;
  width: 100%;
  line-height: 1.8;
  text-align: justify;
  letter-spacing: 0.1em;
}
article a {
  transition: 0.3s;
}
article a:hover {
  opacity: 0.4;
}
/*見出し*/
.Sub-title {
  display: block;
  padding: 80px 0 30px;
  text-align: center;
  z-index: 1;
  vertical-align: bottom;
 /*font-family: 'Amatic SC', cursive;*/
	font-family: "Limelight", sans-serif;
  font-size: 3rem;
  margin: 0 auto;
  letter-spacing: .05em;
  font-weight: 400;
  color: #773A33;
	position: relative;
}
.Sub-title span {
  display: block;
  vertical-align: bottom;
  font-weight: 600;
  color: #D05B51;
  letter-spacing: .25em;
  line-height: 1;
    font-size: 1.5rem;
}

.Sub-title::before{
	content: '';
	display: inline-block;
	width: 100px;
	height: 23px;
	position: absolute;
	top: 63%;
	right:68%;
	background-image: url("../img/illust-left.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	z-index: 2;
}

.Sub-title::after{
	content: '';
	display: inline-block;
	width: 100px;
	height: 23px;
	position: absolute;
	top: 63%;
	left:68%;
	background-image: url("../img/illust-right.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	z-index: 2;
}

/*スクロールでフェードイン*/
.fadeIn {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  visibility: visible !important;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.animation {
  visibility: hidden;
}
/*--------------------------------------------------
 top トップ
----------------------------------------------------*/
#top {
  width: 100%;
  height: 550px;
  background-size: cover;
  background-position: center;
  position: relative;
z-index: 80;
}
#top::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
#top h1 {
  position: absolute;
	width: 300px;
  top: 70%;
  left: 26%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 11 !important;
  white-space: nowrap;
}

/*--------------------------------------------------
intro
----------------------------------------------------*/
#intro {
	padding-top: 150px;
	padding-bottom: 50px;
	background-color: #EEEBE6;
}
.intro-ttl{
	font-size: 1.5em;
	line-height: 1.8;
	margin-bottom: 30px;
	padding-left: 1em;
    padding-right: 1em;
}

.intro-box{
	max-width: 700px;
	margin: 0 auto;
}

.intro-txt{
	padding-left: 1em;
	padding-right: 1em;
}

/*--------------------------------------------------
 point ポイント
----------------------------------------------------*/

#point {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #EEEBE6;
}

.point-container{
	width:100%;
	max-width: 1080px;
	margin: 0 auto;
}

.pointbox {
	margin-top: 50px;
	max-width: 700px;
	width: 96%;
}

.point-grid{
	max-width: 700px;
}

.point1,.point2,
.point3{
	/*margin-left: 0;*/
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/*.point2{
	margin-left: auto;
	margin-right: 0;
	position: relative;
}*/

.point1 .point-grid{
	background-color: #92544A;
}

.point2 .point-grid{
	background-color: #366564;
}

.point3 .point-grid{
	background-color: #1F394F;
}

.point1::after{
	content: '';
	display: inline-block;
	width: 230px;
	height: 223px;
	position: absolute;
	bottom: 50px;
	right: 0;
	background-image: url("../img/illust01.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	z-index: 2;
}

.point2::before{
	content: '';
	display: inline-block;
	width: 200px;
	height: 258px;
	position: absolute;
	bottom: 50px;
	right: 0;
	background-image: url("../img/illust02.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	z-index: 2;
}

.point3::after{
	content: '';
	display: inline-block;
	width: 200px;
	height: 375px;
	position: absolute;
	bottom: 50px;
	right: 0;
	background-image: url("../img/illust03.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	z-index: 2;
}

.point-grid{
	padding-left: 30px;
	padding-right: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto 300px 300px 280px;
	gap: 10px;
}

.pointbox .title {
grid-column-start: 1;
grid-column-end: 4;
/*background: #01558d;*/
color: white;
text-align: center;
padding: 15px 0 5px;
	font-size: 1.3em;
	font-weight: 600;
}
#point-pic {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
.point-caption {
grid-column-start: -4;
grid-column-end: -1;
grid-row-start: -2;
grid-row-end: -1;
	color: white;
}
.pointbox img {
width: 100%;
height: 100%;
object-fit: cover;
}
	
@media screen and (min-width:768px) and (max-width: 899px) {
	.pointbox {
	max-width: 560px;
}
	.point-grid{
	max-width: 560px;
	grid-template-rows: auto 250px 250px 220px;
}
	.point1::after{
	width: 161px;
	height: 156px;
	bottom: 6px;
	right: -125px;
}
	.point2::before{
	width: 140px;
	height: 180px;
	bottom: -3px;
	left: -110px;
}
	.point3::after{
	width: 140px;
	height: 262px;
	bottom: 6px;
	right: -110px;
}
	
	.point1 .point-grid{
	grid-template-rows: auto 250px 250px 200px;
	}
}


	

@media screen and (max-width: 768px) {
	/*.point1::after,
	.point2::before,
	.point3::after{
	bottom: -35px;
	right: 0;
	width: 110px;
	height: 110px;
}*/
	
	.point1::after,
	.point2::before,
	.point3::after{
	  display: none;
	}
	
	.point-grid{
	grid-template-rows: auto 160px 165px 280px;
}
	.point1 .point-grid{
	grid-template-rows: auto 160px 165px 220px;
	}
}

@media screen and (max-width: 450px) {
	.point1::after,
	.point2::before,
	.point3::after{
	bottom: -35px;
	right: 0;
	width: 80px;
	height: 80px;
}
	.point-grid{
	grid-template-rows: auto 150px 150px 330px;
		padding-block-end: 50px;
	}
	
	.point1 .point-grid{
	grid-template-rows: auto 150px 150px 240px;
	}
}

/*--------------------------------------------------
 photos 写真
----------------------------------------------------*/
#photos {
  margin: 0 auto;
}


#photos .fotorama {
  padding-bottom: 80px;
}
	
/*--------------------------------------------------
 plan 間取
----------------------------------------------------*/
#plan {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #F2E1C0;
}



#plan .txt {
  margin: 0 auto;
  padding: 20px 0;
}
.planin {
  background-color: #fff;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 50px;
}

#plan figure{
	padding-left: 0;
	padding-right: 0;
}

@media screen and (min-width: 769px) and (max-width: 1080px) {
	.planin {
		max-width:98%;
		margin: 0 auto;
	}
}

/*--------------------------------------------------
 map 周辺情報
----------------------------------------------------*/
#map {
  margin: 0 auto;
  padding-bottom: 100px;
  /*line-height: 180%;*/
}
#map .mapTxt {
  background-color: #d2c9b9;
  padding-bottom: 15px;
}
#map .txt {
  width: 95%;
  margin-top: 0;
}
#map .mapImg {
  margin: 10px auto 20px;
  background-color: #fff;
  border-radius: 3px;
}
#map .Sub-title {
  padding-top: 30px;
}
#map .img {
  max-width: 950px;
  margin: 0 auto;
}

/*--------------------------------------------------
VirtualTour バーチャル内覧
----------------------------------------------------*/
#VirtualTour {
  background-color: #D5D8D4;
}
.VRbox {
  margin: 0 auto;
}
.VRbox iframe {
  height: 400px;
}

#VirtualTour .Sub-title::before{
	top: 65%;
	right:74%;
}

#VirtualTour .Sub-title::after{
	top: 65%;
	left:74%;
}

#VirtualTour .txt {
  margin: 0 auto;
}

@media screen and (min-width: 679px) and (max-width: 1080px) {
	.VRbox {
		max-width:98%;
		margin: 0 auto;
	}
}
/*--------------------------------------------------
details 物件概要
----------------------------------------------------*/

#details .Sub-title::before{
	top: 65%;
	right:68%;
}

#details .Sub-title::after{
	top: 65%;
	left:68%;
}
/*--------------------------------------------------
 form 問合わせ
----------------------------------------------------*/
#form {
  margin: 100px auto 0;
  text-align: center;
  width: 100%;
}
/*--------------------------------------------------
 googlemap アクセス
----------------------------------------------------*/
#gmap {
  margin: 0 auto 100px;
		padding-bottom: 30px;
}
.gmap iframe {
  vertical-align: bottom;
  height: 600px;
}
#gmap .gmap {
  margin-top: 20px;
  border-radius: 15px;
  border: 5px solid #92544A;
  overflow: hidden !important;

}

/* ---------------------------
.toform
------------------------------ */
.toform {
    position: fixed;
    bottom: 45px;
    right: -15px;
    z-index: 9999;
}
	.toform img {
		width:80%;
		height: 80%;
	}
.toform a:hover img {
    opacity: 0.6;
    -webkit-transition: 0.6s;
    transition: 0.6s;
}
.pagetop {
	background-color: transparent;
    position: fixed;
	bottom: 8px;
    right: 45px;
    z-index: 9999;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}
/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}

.pagetop img {
		width:80%;
	height: 80%;
	}
}