@import url("swiper.css");

/*--------------------------------------------------
 common 共通の設定
----------------------------------------------------*/
body {
	margin: 0;
	width: 100%;
	min-width:100%;
	min-height: 100%;
	background-color: #E6E3DB;
}

.pcOnly {
  display: none;
}
.spOnly {
  display: block;
}
h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.box1200 {
  max-width: 1200px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.box950 {
  max-width: 950px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.box700 {
  max-width: 700px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.box600 {
  max-width: 600px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.box500 {
  max-width: 500px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.txt {
  margin-top: 50px;
  margin-bottom: 50px;
}
.center {
  text-align: center;
}
article {
  font-family: dnp-shuei-mincho-pr6, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #1A1918;
  width: 100%;
  line-height: 180%;
  text-align: justify;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
}
article a {
  transition: 0.3s;
}

article img {
	width:100%;
	height: auto;
}


/*見出し*/
.Sub-title {
  display: block;
  padding: 200px 0 50px;
  text-align: center;
  z-index: 1;
  vertical-align: bottom;
  /*font-family: p22-flw-exhibition, sans-serif;
  font-weight: 400;
  font-style: normal;*/
  text-transform: uppercase;
  font-size: 4rem;
  margin: 0 auto;
  letter-spacing: .3rem;
  color: #1F1F1F;
}
.Sub-title span {
  display: block;
  vertical-align: bottom;
  font-size: 1.4rem;
  /*font-family: a-otf-ud-reimin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;*/
  color: #c09f46;
  letter-spacing: normal;
  padding-top: 12px;
  line-height: 1;
}
.bg_wh {
  background: #fff;
}
/*スクロールでフェードイン*/
.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 {
  /*position: relative;*/
  display: flex;
  width: 100%;
  height: 80vh;
}

#top::before{
	content: "";
	background:url("../img/h2_awata.svg");
	background-repeat: no-repeat;
	background-position: right 50px;
	background-size: 13vw;
	width: 100%;
	height: 100%;
	position: absolute;
	right:0;
	top:0;
	z-index: 2;
}

#top h1 {
  display: block;
  /*position: absolute;
  top: 35%;
  right: 8%;*/
  width:auto; 
  margin-top:5%;
  margin-left:2%;
  /*text-align: center;*/
  /*-webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);*/
  color: #3E3E3E;
  -ms-writing-mode: tb-rl;
  /*writing-mode: vertical-rl;*/
  font-size: clamp(2.7rem, 1rem + 2vw, 4rem);
  line-height: clamp(6rem, 3vw, 7rem);
  letter-spacing: clamp(0.5rem, 3vw, 0.8rem);
  font-style: normal;
  /*filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, .5));*/
  z-index: 13;
}

.top_slider {
  width: 37%;
  margin-left:15%;
}
.slick-img img {
  height: 80vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}
.slick-dots{
  text-align: right;
  right:-20px;
}

.slick-dots li{
  display:inline;
  bottom: -70px;
}

#top a.scroll {
  display: inline-block;
  position: absolute;
  left: 2%;
  bottom: 0;
  z-index: 60;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #000;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .2em;
  text-decoration: none;
  writing-mode: vertical-lr;
}
#top a.scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #000;
}
#top a.scroll::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: rgba(255, 255, 255, .4);
}
#top a.scroll::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/*▼タイトルのアニメーション
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
.blurTrigger {
  opacity: 0;
}*/
/*▲タイトルのアニメーション*/
/*スマホ表示*/
@media screen and (max-width: 639px) {
  #top{
	flex-direction: column;
  }	
	
	#top::before{
		background-size: 20vw;
	}
  .top_slider {
	order: 2;
	width: 100%;
	margin-left:0;
  }
  #top h1 {
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
	order: 1;
	width: 100%;
	padding-left: 20px;
  }
  .slick-img img {
    height: 60vh;
  }
  .slick-dots{
    right:30px;
  }
 
}

/*--------------------------------------------------
 concept コンセプト
----------------------------------------------------*/

#concept{
	height: 120vh;
}

.concept_title{
  margin-top: clamp(80px, 3vw, 50px);
  padding:0 20% 50px;
  font-size: clamp(2.5rem, 1.9286rem + 1.4286vw, 3rem);
  line-height: 4rem;
}

.concept_txt {
  /*margin-top: clamp(80px, 3vw, 50px);*/
  padding:0 40% 30px 30%;
  line-height: 2;
}

#concept ul{
	
}

#concept ul li{
	position: absolute;
}

.con_p1{
	width: 30%;
	top:2vh;
	right:2%;
}

.con_p2{
	width: 25%;
	top:20vh;
	left:-2%;
}

.con_p3{
	width: 40%;
	top:90vh;
	left:55%;
}

/*スマホ表示*/
@media screen and (max-width: 700px) {
  #concept{
	height: 210vh;
}
  .concept_title{
    padding-top: 70vh;
	margin-top:0;
	padding-left:10%;
  }
  .concept_txt {
	padding:0 10% 30px 10%;	
  }
.con_p1{
	width: 60%;
	top:10vh;
	}
	.con_p2{
	width: 65%;
	top:170vh;
	left:30%;
	}
	.con_p3{
	width: 70%;
	top:230vh;
	left:15%;
	}
}

/*--------------------------------------------------
 banner オープンハウス
----------------------------------------------------*/
#banner{
	padding-top:100px;
}

/*--------------------------------------------------
 open オープンハウス
----------------------------------------------------*/
.bg_gr{
  background-color: hsla(0,0%,90%,1.00);
  /*background: rgb(92,92,100);
  background: linear-gradient(90deg, rgba(92,92,100,1) 0%, rgba(218,184,156,1) 44%, rgba(213,180,152,1) 64%, rgba(98,79,65,1) 98%);
  padding-bottom:100px;*/
}

#open {
  margin: 0 auto 80px;
  text-align: center;
}

#open .Sub-title{
  padding-top:100px;
}

#open h3 {
  font-size: 2.3rem;
  letter-spacing: 0.15em;
  line-height: 200%;
  width: 95%;
  margin: 0 auto;
}
#open .open_txt {
  text-align: justify;
  font-size: 1.4rem;
  width: 95%;
  margin: 30px auto;
  padding-bottom:100px;
}
/*--------------------------------------------------
 map 周辺情報
----------------------------------------------------*/
#map {
  margin: 0 auto;
  padding-bottom: 100px;
}
#map .txt {
  margin-top: 0;
}
#map figure {
  margin-top: 50px;
  margin-bottom:50px;
}
#map .link_sue{
  text-align: center;
}


/*--------------------------------------------------
 plan 間取
----------------------------------------------------*/
#plan {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
}
#plan:before {
  position: absolute;
  top: 0;
  right: 25%;
  left: 25%;
  z-index: -2;
  height: 3px;
  content: "";
  border-top: #111 1px solid;
  border-bottom: #111 1px solid;
}
#plan:after {
  position: absolute;
  top: 2px;
  right: 5%;
  left: 5%;
  z-index: -1;
  height: 1px;
  content: "";
  background: #111;
}
#plan .txt {
  margin: 0 auto;
  padding: 20px 0;
}
.line {
  background: linear-gradient(transparent 60%, #ffff99 20%);
  /*font-weight:500; */
}
/*
:root {
  --line: #e0e0e0;
}*/
#point {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 100px;
}

#content2_bg {
  background-color: #BDC0BA;
}

/* swiper point */
.p-swiper-container{
  position: relative;
}
.swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 90vh;
    overflow: hidden;
}
.p-swiper__desc {
  position: absolute;
  width: 100%;
  text-align: center;
  color: white;
  top: 45%;
  transform: translateY(-50%);
}
.p-swiper__heading {
  font-size: 40px;
  padding-bottom: 10px;
}
.p-swiper__text {
  font-size: 21px;
}
/*スマホ表示*/
@media screen and (max-width: 639px) {
.swiper-slide {
	height: 100vh;
	}
}

/*--------------------------------------------------
 plan_reno プラン案
----------------------------------------------------*/
	
.plan_items{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30vh;
}

.plan_items li{
	width: 47%;
	margin-bottom:130px;
	position: relative;
}

.plan_items li:nth-child(2n+1){
	margin-top:-150px;
}

.plan_items li h5{
	font-size: 7rem;
	position: absolute;
	right:30px;
	top:-3rem;
}

.plan_items li h4{
	text-align: center;
	font-size: 2rem;
	margin-bottom: 20px;
}

/*スマホ表示*/
@media screen and (max-width: 639px) {
	.plan_items li{
		width: 100%;
	}
	.plan_items li:nth-child(2n+1){
	margin-top:0;
}
}

/*--------------------------------------------------
 photos 写真
----------------------------------------------------*/
#photos {
  margin: 0 auto 150px auto;
}
/* ▼fancybox css▼ */
#photos ul {
  max-width: 950px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* サムネの画像サイズによって変える */
  text-align: center;
}
/*スマホ表示*/
@media screen and (max-width: 639px) {
  #photos ul {
    padding-left: 10px;
    padding-right: 10px;
  }
}

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

#point h2.Sub-title{
	margin-top:400px
}

  /*ラッパー要素*/
  #point .wrapper{
    	display: flex;
    	justify-content: space-between;
    	position: relative;
  }
  /*コンテンツのブロック*/
  #point .point{ width: 40vw; }
  #point .point div{ 
	padding-top: 50vh;
	padding-right:5vw;
	max-width: 575px;
  }
  #point .point div:last-child{ padding-bottom: 50vh; }
  #point .point h2{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 100%;
	font-size: 3rem;
	line-height: 1.8em;
	margin-bottom:50px;
}
  /*画像のブロック*/
  #point .images{
    	width: 50vw;
    	height: 100vh;
    	display: flex;
    	align-items: center;
    	position: sticky;
    	position: -webkit-sticky;
    	top:0;
  }
  #point .images p {
    	/*height: 400px;*/
    	margin: auto;
    	display: block;
    	visibility: hidden;
    	/* 画像が透過pngの時は背景色が必要です*/
    	/*background: #5bd2d2;*/
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	/* フェード速度 */
    	transition: .8s;
    	opacity: 0;
    }
  #point .images p:first-child,
  #point .images p.active {
    	visibility: visible;
    	opacity: 1;
  }

	#point .point p{
			padding: 2vw;
		}
/*スマホ表示*/
@media screen and (max-width: 639.9px) {
	#point .point{
		width: 100% !important;
		max-width: 100%;
	}
	#point .point div{
		max-width: 100%;
		padding:0 5vh !important;
		width: 100%;
		margin-bottom:10vh;
	}
	#point .point div:last-child{ padding-bottom: 0 !important; }
	#point .point h2{
		-ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
		text-align: center;
		padding:5vw;
		font-size: 2rem;
	}
	
}

/*---------.areaphotos------------*/

.areaphotos{
	position:relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height:90vh;
	align-items: center;
}


.areaphotos::before{
	content:' ';
	display: inline-block;
	width:50vw;
	height:50vh;
	max-width:600px;
	max-height:600px;
	border: 30px solid #647D5F;
	border-image: linear-gradient(to left, #647D5F 0%, #E5D9A4 100%);
  	border-image-slice: 1;
	position:absolute;
	top:10vw;
	left:10vw;
	z-index: -1;
}

.areaphotos li{
	width:40vw;
	max-width:400px;
}


.ap_time{
	height:30px;
	font-size: 2rem;
	color:#647D5F;
	letter-spacing: 0.2em;
}

.areaphotos .ap_photo1{
	width:30vw;
	max-width:300px;
	margin-bottom:10vh;
}

.areaphotos .ap_photo3{
	margin-bottom:10vh;
}

.areaphotos .ap_photo4{
	width:30vw;
	max-width:300px;
}


.areaphotos .time_night{
	margin-top:10vh;
}



/*--------------------------------------------------
VirtualTour バーチャル内覧
----------------------------------------------------*/
#VirtualTour {
  padding-bottom: 50px;
}
.VRbox {
  margin: 0 auto;
}
.VRbox iframe {
  height: 400px;
}
#VirtualTour .txt {
  margin: 0 auto;
}

/*--------------------------------------------------
 #details
----------------------------------------------------*/
#details div {
  max-width: 960px;
  margin: 0 auto;
}
#details table {
  box-sizing: border-box;
  border-collapse: collapse;
  width: 100%;
}
#details table th, #details table td {
  border-block-end: 1px solid #DDDAD1;
  padding-inline-start: 8px;
  margin-block-start: 5px;
  vertical-align: middle;
  font-style: normal;
  height: 2.8em;
  text-align: justify;
}
#details table th {
  width: 20%;
  font-weight: normal;
}
/*スマホ表示*/
@media (max-width: 767px) {
  #details div {
    padding-left: 10px;
    padding-right: 10px;
  }
  #details table {
    width: 100%;
  }
  #details table th, #details table td {
    display: block;
    width: 100%;
    height: auto;
    border-block-end: 0px;
    padding: 3px 10px;
  }
  #details table th {
    background-color: #E5E0D1;
  }
}

/* ---------------------------
service
------------------------------ */
#service {
  margin: 50px auto 0;
  padding: 50px 10px;
}
#service ul {
  margin: 0 auto;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
  text-align: center;
}
#service p {
  text-align: center;
  margin-bottom: 1.6rem;
}
/*スマホ表示*/
@media screen and (max-width: 639px) {
  #service p {
    text-align: justify;
  }
}
/*--------------------------------------------------
 form 問合わせ
----------------------------------------------------*/
#form {
  margin: 100px auto 0;
  text-align: center;
  width: 100%;
}
/* ---------------------------
contact
------------------------------ */
.contact button {
	border: none;
}
.contact p {
	line-height: normal;
}
.cta_btn {
  position: fixed;
  background-color: #A69337;
  border-radius: 0;
  bottom: 3%;
  right: 0;
  box-shadow: 0 1px 3px 1px rgb(0 0 0 / 8%);
  transition: all 0.3s ease;
  z-index: 90;
}
.cta_link {
  display: flex;
  align-items: center;
}
.cta_icon {
  padding: 2rem;
  color: #fff;
}
.cta_ttl {
  padding-left: 8px;
  padding: 2rem;
  text-align: justify;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: normal;
  color: #fff;
}
#cta_floating.cta_btn,
.cta_floating {
  transform: translateX(10rem);
}
#cta_floating.cta_btn:hover,
.cta_floating:hover {
  transform: translateX(0);
}
/*スマホ表示*/
@media screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }
  #cta_floating.cta_btn,
  .cta_floating {
    transform: translateX(0);
  }
  .cta_btn {
    right: 16px;
    height: 60px;
    width: 60px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    border: none;
    outline: none;
    box-shadow: 0 1px 3px 1px rgb(0 0 0 / 8%);
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
    transform: translateX(calc(100% + 16px));
    transition: 0.2s cubic-bezier(0, .6, .99, 1);
    cursor: pointer;
  }
.cta_link .material-icons-outlined {
		margin-left: -.3rem;
	}
}

.button-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 250px;
    margin: 120px auto auto auto;
    padding: .9em 2em;
    border: none;
    /*border-radius: 5px;*/
    background-color: #A69337;
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
	font-family: "source-han-serif-japanese", serif;
}

.button-contact:hover {
    background-color: #C4C4C4;
}

.button-contact::before {
    width: 1em;
    height: 1em;
    margin-right: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M23.5%208.9c.2-.1.5%200%20.5.2v9.6c0%201.2-1%202.2-2.2%202.2H2.2C1%2021%200%2020%200%2018.8V9.2c0-.2.3-.4.5-.2%201%20.8%202.4%201.9%207.2%205.3%201%20.7%202.7%202.2%204.3%202.2%201.7%200%203.4-1.5%204.3-2.2%204.8-3.5%206.2-4.5%207.2-5.4zM12%2015c1.1%200%202.7-1.4%203.4-1.9%206.2-4.5%206.7-4.9%208.1-6%20.3-.3.5-.6.5-1v-.8C24%204%2023%203%2021.8%203H2.2C1%203%200%204%200%205.3v.9c0%20.3.2.6.4.8%201.4%201.1%201.9%201.5%208.1%206%20.8.6%202.4%202%203.5%202z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}
@media screen and (max-width: 639px) {
.button-contact {
  margin: 60px auto auto auto;
  }
}


/*--------------------------------------------------
 googlemap アクセス
----------------------------------------------------*/
#gmap {
  width: 100%;
}
#gmap iframe {
  margin: 50px auto 100px;
}
/*--------------------------------------------------
 forPC
----------------------------------------------------*/
@media screen and (min-width: 640px) {
  /*--------------------------------------------------
 common 共通の設定
----------------------------------------------------*/
  .pcOnly {
    display: block;
  }
  .spOnly {
    display: none !important;
  }
  .box1200, .box950, .box700, .box600 {
    padding-left: 0;
    padding-right: 0;
  }
  /*--------------------------------------------------
 top トップ
----------------------------------------------------*/
  #open {
    padding: 4rem 4rem 0;
  }
  #open .en {
    font-size: 3rem;
  }
  /*--------------------------------------------------
 map 周辺情報
----------------------------------------------------*/
  #map {
    margin: 100px auto 0;
  }
  .map_kitano{
	margin:0 auto 0 0;	
  }	
  .map_senbon{
	margin:0 0 0 auto;	
  }

  /*--------------------------------------------------
 photos 写真
----------------------------------------------------*/
  #photos {
    width: 100%;
  }
  #photos .fotorama {
    margin-top: 50px;
  }
  /*--------------------------------------------------
VIRTUAL TOUR バーチャル内覧
----------------------------------------------------*/
  /*  #VirtualTour {
    width: 100%;
  }*/
  .VRbox {
    width: 100%;
  }
  .VRbox iframe {
    height: 600px;
  }
  #VirtualTour .VRbox {
    width: 100%;
    padding: 50px 0;
  }
  #VirtualTour .txt {
    max-width: 600px;
  }
  /*--------------------------------------------------
details 物件概要
----------------------------------------------------*/
  #wakugaiyoL, #wakugaiyoR {
    float: left;
  }
  #wakugaiyoL table, #wakugaiyoR table {
    width: 98%;
    margin: 0 auto;
  }
  #details table th, #details table td {
    display: table-cell;
    text-align: justify;
  }
  #details table th {
    background: none;
    padding-inline-start: 0;
  }
  #details td {
    width: 50%;
  }
  #wakugaiyoL, #wakugaiyoR {
    width: 49.5%;
  }
  #wakugaiyoL table th {
    width: 20%;
  }
  #wakugaiyoR table th {
    width: 24%;
  }
  #wakugaiyoL table {
    margin-right: 0.5%;
  }
  .none {
    display: inherit;
  }
  #details .box950 {
    margin-top: 80px;
  }
  /*--------------------------------------------------
 googlemap アクセス
----------------------------------------------------*/
}
body {
  overflow-x: hidden;
}