@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*PCでは無効（改行しない）*/
.sma{
    display: none;
}
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}

/*　mainvisual
--------------------------------------------------------- */
mainvisual{
}

h1.title{
	margin: 0;
	position: absolute;
	top: 40%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

h1.title_en{
	margin: 0;
	position: absolute;
	top: 68%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

.title_en img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 767px) {
h1.title{
	top: 30%;
}
}

.slider {
  position: relative;
  max-width: 100%;/* PC最大幅 */   
  aspect-ratio: 16/8;     /* 高さを比率で維持 */
  margin: auto;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fade 12s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

.slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* 画像を枠に合わせてトリミング */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slider {
    max-width: 600px;     /* タブレット */
    aspect-ratio: 4/6;
  }
}

@keyframes fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}


/* arrows
--------------------------------------------------------- */
.arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 6%;
  z-index: 9999;
}
@media screen and (max-width: 767px) {
	.arrows {

	}
}
.arrows path {
  stroke: #FFFFFF;
  fill: transparent;
  stroke-width: 1px;  
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite; 
}
@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}
@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}
.arrows path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}
.arrows path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}
.arrows path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s; /* Safari 和 Chrome */
}

/* lead
--------------------------------------------------------- */
section#lead {
  margin-block-start: 100px;
}
section#lead h3.title{
margin: 0 auto;
text-align: center;
font-weight: 400;
font-size: 3rem;
letter-spacing: 0.25rem;
line-height: 2;
}
.photogallery{
max-width: 960px;
text-align: center;
margin: 0 auto;
padding-block-end:80px;
}
/* plan
--------------------------------------------------------- */
section#plan {
}
section#plan img{
padding: 0 1%;
max-width: 670px;
}
/* img */
@media screen and (min-width: 768px) {
	.sp-only {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.pc-only {
		display: none;
	}
}

/* photos
--------------------------------------------------------- */
#photos {
  width: 86%;
  margin: 0 auto;
  margin: 0 7%;
  padding: 0 0 200px 0;
}
#photos p {
  text-align: center;
  margin-bottom: 35px;
}
.photo_txt{
font-size: 1.65rem;
}
#photos .fadein {
  width: 90%;
  margin: 0 auto;
}
.fancybox_area {
  column-count: 6;
  column-gap: 10px;
}
.fancybox_area li a {
  display: inline-block;
  margin: 5px 0 0;
  position: relative;
}
.fancybox_area li a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  font-family: 'Material Icons';
  content: '\e8b6';
  font-size: 3rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition: all .5s ease;
}
.fancybox_area li a:hover::before {
  opacity: 1;
}
.fancybox_area img {
  width: 100% !important;
  height: auto !important;
  vertical-align: bottom;
}
@media (max-width: 767px) {
  #photos {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 150px 0;
  }
  #photos p {
    width: 80%;
    margin: 0 auto 35px;
    text-align: start;
  }
  .fancybox_area {
    column-count: 3;
    width: 95%;
    margin: 0 auto;
  }
}

/* map
--------------------------------------------------------- */
section#map {}

/* deg360
--------------------------------------------------------- */
section#deg360 {
	width: 100%;
	background-color: #58707B;
	padding-block-start:80px;
	margin-block-end:100px;
}
section#deg360 .innerWrap{
	padding-block-end:100px;
}
section#deg360 .Sub-title{
color: #ffffff;
}
section#deg360 .Sub-title span{
color: #ffffff;
}
section#deg360 p {
	text-align: center;
	margin-block-end: 20px;
	font-size: 1.55rem;
	letter-spacing: 0.05rem;
	line-height: 1.8;
	color: #FFFFFF;
}
section#deg360 .camera_box {
	max-width: 1080px;
	margin-inline-start: auto;
	margin-inline-end: auto;
}
section#deg360 p {
	text-align: center;
	margin-block-end: 20px;
	font-size: 1.6rem;
}


/* details　物件概要
---------------------------------------------------------------*/
section#details {}
dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border-top: none;
}
dt {
	width: 23%;
	padding: 14px 8px 8px 8px;
	box-sizing: border-box;
	border-block-end: 1px solid #5e5e5e;
	font-weight: 600;
}
dd {
	padding: 14px 8px 8px 8px;
	margin: 0;
	border-block-end: 1px solid #5e5e5e;
	width: 77%;
	box-sizing: border-box;
}
.producer:after {
	content: "\0bb";
}

/* inquiry
--------------------------------------------------------- */
section#inquiry {}
.button a {
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  border: solid 3px #336774;
  color: #336774;
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.button a:hover {
  color: #fff;
  background: #336774;
  transition: all 0.3s;
}

/* Google Map
--------------------------------------------------------- */
#gmap {
margin: 0 auto;
  max-width: 960px;
}
#gmap iframe {
  margin: 50px auto 100px;
}




/*===========================================================*/
/* sp*/
/*===========================================================*/
@media screen and (max-width: 767px) {
	/* deg360 */
	section#deg360 {
		width: 100%;
		margin: 0 auto;
	}
	section#deg360 .camera_box iframe {
		height: 440px;
	}
	/* details */
	section#details dt, dd {
		display: block;
		width: 100%;
		border: none;
	}
	dt {
		background-color: #eee;
	}
}