/* ----------------------------------------------------------------------
 基本設定
---------------------------------------------------------------------- */
.estate .gfooter {
  margin-top: 0;
}

/***********************************************************
mv
************************************************************/

.mv_inner {
  width: 100%;
  height: 40vh;
  position: relative;
  text-align: center;
  /* background-color: #f29b87; */
  background-image: url(../img/mv_pc.png);
  background-size: cover;
  /* background-position: center; */
}
.mv_catch_inner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 880px;
  width: 96%;
  height: 40vh;
  margin: 0 auto;
}
.mv_catch {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  text-align: left;
  color: #fff;
  -webkit-text-stroke: 1px rgba(65, 65, 65, 0.1);
  text-stroke: 1px rgba(65, 65, 65, 0.1);
}
.mv_catch_01 {
  font-weight: 700;
  font-size: 2.375rem;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: .625rem;
}
.mv_catch_02 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.mv_catch_03 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before {
  animation: img-wrap 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

@media screen and (max-width: 768px) {
  .mv_inner {
    height: 55vh;
    background: url(../img/mv_sp.png) top center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .mv_catch_inner {
    height: 55vh;
    align-items: center;
  }  
  .mv_catch {
    text-align: center;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .mv_catch_01 {
    font-size: 2.25rem;
  }
  .mv_catch_02 {
    font-size: 1rem;
  }
}



/***********************************************************
catch
************************************************************/
.catch_inner {
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: 6rem 0;
  font-weight: 600;
  font-size: 1.25rem;
}
.catch_txt {
  margin: 0 auto;
}
.catch_txt .s-txt {
  text-align: center;
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .catch_inner {
    width: 90%;
    padding: 4rem 0 2.5rem;
    font-size: 1.125rem;
  }
}



/***********************************************************
about
************************************************************/
.about {
  background-image: url(../img/bk_about.png);
  background-size: contain;
  background-repeat:repeat;
  position: relative;
}
.about_inner {
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: 6.5rem 0 6rem;
  text-align: center;
}
.s-title {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 600;
  margin-bottom: 3.125rem;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  border-bottom: 1px solid #ececec;
  padding-bottom: 1.875rem;
}
.s-title::first-letter {
  color: #002662;
}
.s-title::before {
  content: "";
  display: inline-block;
  background-image: url(../img/point.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 70px;
  height: 20px;
}
.s-title::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 1px #002662;
  bottom: -1px;
  width: 20%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.s-txt {
  text-align: left;
  margin-bottom: 3.125rem;
  letter-spacing: 1px;
  line-height: 1.8;
}
.about_inner_box {
  display: flex;
  margin-top: .625rem;
  justify-content: space-between;
}
.about_txt {
  width: 50%;
  display: flex;
  align-items: center;
}
.about_img {
  width: 45%;
  max-width: 500px;
}

@media screen and (max-width: 768px) {
  .about_inner {
    width: 80%;
    padding: 5rem 0 2.5rem;
  }
  .about_inner_box {
    flex-direction: column;
    margin-top: 0;
  }  
  .s-title {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 2.5rem;
  }
  .about_txt {
    width: 100%;
    margin-left: 0;
    margin: 0 auto;
    margin-top: 0;
  }
  .about .s-txt {
    margin-bottom: 1.875rem;
  }
  .about_img {
    width: 100%;
    margin: 0 auto;
  }
}



/***********************************************************
strengths
************************************************************/
.strengths_inner {
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: 6.5rem 0 3rem;
  text-align: center;
}
.strengths_inner_box {
  max-width: 880px;
  margin: 0 auto;
}
.strengths_txt .s-txt {
  display: inline-block;
}
.strengths_img img {
  max-width: 860px;
  width: 90%;
}

@media screen and (max-width: 768px) {
  .strengths_inner {
    width: 80%;
    padding: 5rem 0 2rem;
  }
  .strengths_txt .s-txt {
    margin-bottom: 1.875rem;
  } 
  .strengths_img img {
    max-width: 100%;
  }
}



/***********************************************************
plan
************************************************************/
.plan {
  background-color: #f9fbfe;
  position: relative;
}
.plan_inner {
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: 16rem 0 6rem;
  text-align: center;
}
.plan_inner_anker {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.plan_inner_anker_btn a {
  display: inline-block;
  width: 300px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  padding: .875rem 0;
  cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
  box-sizing: border-box;
}
.plan_inner_anker_btn a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(255,255,255);
	transform: translateX(-100%);
	transition: all .35s;
	z-index: -1;
}
.plan_inner_anker_btn a:hover::before {
	transform: translateX(0);
}
.sale_btn a {
  background-color: #95c1b9;
  border: 1px dashed #95c1b9;
}
.sale_btn a:hover {
	color: #95c1b9;
}
.rental_btn a {
  background-color: #b0ca98;
  border: 1px dashed #b0ca98;
}
.rental_btn a:hover {
	color: #b0ca98;
}
.plan_inner_in {
  max-width: 880px;
  margin: 0 auto;
  margin-top: 6rem;
}
.plan_inner_ttl {
  position: relative;
  font-size: 1.375rem;
  font-weight: 600;
}
.ttl_sale {
  color: #95c1b9;
}
.ttl_rental {
  color: #b0ca98;
}
.plan_inner_ttl::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}
.ttl_sale::before {
  background-color: #95c1b9;
}
.ttl_rental::before {
  background-color: #b0ca98;
}
.plan_inner_ttl span {
  position: relative;
  padding: 0 2em;
  background: #f9fbfe;
}
.plan_inner_in p {
  margin-top: 2.5rem;
  line-height: 1.8;
}
.plan_inner_box {
  /* max-width: 880px;
  margin: 0 auto; */
  margin-top: 6rem;
  /* グリッドレイアウトを指定 */
  display: grid;
  /* グリッドの列の幅を指定 */
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  /* グリッドの列・行両方の間の余白を指定 */
  gap: 40px;
}
.plan_inner_box_in {
  /* グリッドレイアウトを指定 */
  display: grid;
  /* グリッドの行の高さを指定 */
  grid-template-rows: subgrid;
  /* グリッドの縦方向の位置を指定 */
  grid-row: span 3;
  /* グリッドの列・行両方の間の余白を指定 */
  gap: 10px;
  /* box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.2); */
  position: relative;
  padding-top: 2.5rem;
  margin-bottom: 3.125rem;
}
.sale_01, .sale_02 {
  background-color: #fff;
  border: 1px dashed #95c1b9;
}
.rental_01, .rental_02, .rental_03, .rental_04 {
  background-color: #fff;
  border: 1px dashed #b0ca98;
}
.plan_inner_box_in::after {
  content: '';
  display: block;
  width: 90px; 
  height: 90px;
  background-size: contain;
  background-repeat:no-repeat;
  position:absolute;
  top:0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.sale_01::after {
  background-image: url(../img/sale_01.png);
}
.sale_02::after {
  background-image: url(../img/sale_02.png);
}
.rental_01::after {
  background-image: url(../img/rental_01.png);
}
.rental_02::after {
  background-image: url(../img/rental_02.png);
}
.rental_03::after {
  background-image: url(../img/rental_03.png);
}
.rental_04::after {
  background-image: url(../img/rental_04.png);
}
.plan_inner_box_in h4 {
  font-size: 1.375rem;
  margin: 1.25rem 0;
  line-height: 1.4;
  margin-bottom: .625rem;
  font-weight: 600;
}
.plan_inner_box_in p {
  text-align: left;
  font-size: .875rem;
  margin: 0 1.875rem;
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .plan_inner {
    width: 90%;
    margin: 0 auto;
    padding: 13rem 0 1rem;
  }
  .plan_inner_anker {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .plan_inner_in {
    margin-top: 4rem;
  }
  .rental_inner {
    margin-top: 2rem;
  }
  .plan_inner_box {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
}



/***********************************************************
triangle
************************************************************/
.triangle2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.triangle2 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 160px;
}
.triangle2 .shape-fill {
  fill: #fff;
}

@media screen and (max-width: 768px) {
  .triangle2 svg {
    height: 120px;
  }  
}



/***********************************************************
contact
************************************************************/
.contact {
  background-image: url(../img/bk_contact.png);
  background-size:cover;
  background-repeat:repeat;
  position: relative;
}
.contact_inner {
  width: 100%;
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: 3.75rem 0;
}
.box-contact_inner {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
}
.contact_txt {
  margin-bottom: 1.875rem;
  line-height: 1.8;
  text-align: center;
}
.contact_box {
  display: flex;
  gap: 4%;
  justify-content: center;
  align-items: center;
  background-color: #f9fbfe;
  border: 1px solid #002662;
  padding: 1.875rem 3.125rem;
}
.contact_tel {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: .625rem;
  position: relative;
  padding-left: 45px;
}
.contact_tel::before {
  content: '';
  display: block;
  width: 41px; 
  height: 24px;
  background-image: url(../img/contact_01.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.contact_time {
  font-size: .875rem;
  padding-left: 48px;
  margin-bottom: .5rem;
}
.contact_time span {
  font-size: 1.125rem;
  font-weight: 600;
  padding-left: .5rem;
}
.contact_holiday {
  font-size: .75rem;
  padding-left: 48px;
}

@media screen and (max-width: 768px) {
  .contact_inner {
    width: 90%;
  }
  .contact_box {
    gap: 0;
    justify-content: space-between;
    padding: 1.25rem;
  }
  .contact_tel {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    padding-left: 28px;
  }
  .contact_tel::before {
    width: 25px; 
    height: 15px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }  
  .contact_time {
    font-size: .875rem;
    padding-left: 28px;
    margin-bottom: .375rem;
  }
  .contact_time span {
    font-size: 1rem;
    padding-left: .5rem;
  }
  .contact_holiday {
    font-size: .625rem;
    padding-left: 28px;
  }
  .contact_box_img {
    width: 15%;
  }
}



/* ---------------------------------------------------------------------
scroll_up ｜下から上へ出現
--------------------------------------------------------------------- */
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(-30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}
.scroll_left.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}
.scroll_right.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

/*----------------------------
scroll ｜タイミングをずらす
----------------------------*/
.timing02 {transition-delay: .2s;}
.timing025 {transition-delay: .3s;}
.timing03 {transition-delay: .4s;}
.timing035 {transition-delay: .5s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}
.timing055 {transition-delay: .9s;}
.timing06 {transition-delay: 1.0s;}