@charset "utf-8";

/* --------------------------------------------


ひたちなか「街なか」モデルハウス　LP


---------------------------------------------- */


.lp_bg {
 position: fixed;
 top: 120px;
 left: 0;
 width: 100%;
 height: 86vh;
 background-color: #F5F7F4;
}

.lp_bg figure {
 width: 66%;
 height: 100%;
 margin: 0 0 0 auto;
 z-index: -1;
}

.lp_bg figure img {
 object-fit: cover;
 object-position: center;
 height: 100%;
}


@media only screen and (max-width:640px) {
 .lp_bg {
  height: 140vw;
 }

 .lp_bg figure {
  width: 100%;
  height: 100%;
 }

}


.lp_chikaWrap {
 position: relative;
 z-index: 1;
}


/* --------------------------------------------

フッター固定バー

---------------------------------------------- */
.mv {
 position: relative;
 height: 86vh;
}

.mv .scrolldown {
 position: absolute;
 left: 15%;
 bottom: -80px;
 display: block;
 filter: invert(100) brightness(100);
 z-index: 2;
}

.mv_title {
 display: flex;
 align-items: center;
 align-content: center;
 position: absolute;
 flex-wrap: wrap;
 top: 0%;
 left: 0%;
 width: 34%;
 height: 100%;
 background: linear-gradient(0deg, #005751 40%, #F5F7F4 40%);
}

.mv_title figure {
 width: 100%;
 margin: 0 auto;
 text-align: center;
}

.mv_title figure img {
 max-width: 560px;
}

.mv_title figure:nth-of-type(2) {
 background-color: #005751;
}

@media only screen and (max-width:640px) {
 .mv {
  height: 160vw;
 }

 .mv .scrolldown {
  left: 43%;
  bottom: -40px;
 }

 .mv_title {
  align-items: flex-start;
  align-content: flex-start;
  top: inherit;
  width: 100%;
  height: 55%;
  bottom: 0;
  background: linear-gradient(0deg, #005751 50%, #F5F7F4 50%);
 }

 .mv_title figure img {
  margin: auto;
 }

 .mv_title figure:nth-of-type(2) img {
  max-width: 460px;
 }

}




/* --------------------------------------------


リード文


---------------------------------------------- */
.mx_text {
 position: relative;
 padding: 160px 0 160px;
 color: #fff;
 background-color: #005751;
}

.mx_text h2 {
 width: 92%;
 margin: auto;
 font-size: 2.0rem;
 line-height: 2.1;
 text-align: center;
}


@media only screen and (max-width:640px) {
 .mx_text {
  margin: -10px 0 0;
 }

 .mx_text h2 {
  font-size: 1.6rem;
 }
}







/* --------------------------------------------


ポイント


---------------------------------------------- */
.pointWrap {
 padding: 128px 0 0;
 background-color: #F5F7F4;
}

.point_item {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 width: 94%;
 max-width: 1100px;
 margin: 0px auto;
}

.point_item::before {
 content: "";
 position: absolute;
 display: block;
 width: 88%;
 height: 560px;
 background-color: red;
}


.point_text {
 position: relative;
 width: 50%;
 max-width: 480px;
}

.point_text figure {
 width: 55%;
}

.point_text h2 {
 margin: 12px 0 16px;
}

.point_text h2 span {
 display: inline-block;
 padding: 4px 4px 8px;
 margin: 2px 0;
 background-color: #fff;
 font-size: 3.4rem;
 font-weight: 600;
 letter-spacing: -0.025em;
 line-height: 1;
 color: #365B52;
}

 .point_text h2 img {
  width: 0.8em;
  vertical-align: baseline;
 }
.point_text p {}

.point_image {
 position: relative;
 width: 50%;
}

.point_item-1 {}

.point_item-1::before {
 left: -13%;
 top: 24%;
 background-color: #BDDCD2;
}

.point_item-1 > figure:nth-of-type(1) {
 width: 39%;
 margin: 0px 0 30px;
}

.point_item-1 > figure:nth-of-type(2) {
 width: 53%;
 margin: 96px 0 0 auto;
}

.point_item-1 .point_text {
 margin: -220px 0 300px 5%;
}

.point_item-2 {}

.point_item-2::before {
 right: -13%;
 bottom: 0%;
 background-color: #F9DFC6;
}

.point_item-2 > figure:nth-of-type(1) {
 width: 53%;
 margin: 0px 0 30px;
}

.point_item-2 > figure:nth-of-type(2) {
 width: 39%;
 margin: -96px 0 0 auto;
}

.point_item-2 .point_text {
 margin: -220px 10% 160px auto;
}


@media only screen and (max-width:640px) {
 .pointWrap {}

 .point_item {
  width: 100%;
 }

.point_item::before {
 height: 980px;
}
 .point_text {
  width: 90%;
  max-width: none;
 }

 .point_text figure {
  width: 48%;
 }

 .point_text h2 span {
  font-size: 2.8rem;
 }

 .point_text p {}

 .point_image {}

 .point_item-1 {}

 .point_item-1::before {
  left: -13%;
  top: 14%;
 }

 .point_item-1 > figure:nth-of-type(1) {
  width: 56%;
  margin: 0px 0 30px;
 }

 .point_item-1 > figure:nth-of-type(2) {
  width: 70%;
  margin: 48px 0 0 auto;
 }

 .point_item-1 .point_text {
  margin: -68px auto 196px;
 }

 .point_item-2 {}

 .point_item-2::before {
  right: -13%;
  bottom: 0%;
  background-color: #F9DFC6;
 }

 .point_item-2 > figure:nth-of-type(1) {
  width: 70%;
  margin: 0px 0 30px;
 }

 .point_item-2 > figure:nth-of-type(2) {
  width: 56%;
  margin: 48px 0 0 auto;
 }

 .point_item-2 .point_text {
  margin: -96px auto 128px;
 }


}


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











/* --------------------------------------------

フッター固定バー

---------------------------------------------- */
.planWrap {
 position: relative;
 padding: 64px 0 128px;
 background-color: #005751;
}

.plan_title {
 position: relative;
 margin: auto;
 text-align: center;
}

.plan_title p {
 text-align: center;
 font-size: 3.6rem;
 line-height: 1.6;
 color: #fff;
}

.plan_title p span {
 display: inline-block;
 padding: 0 8px 6px;
 margin: 0 0 48px;
 font-size: 3.2rem;
 border-bottom: 1px solid #fff;
}

.plan_title figure {
 max-width: 650px;
 margin: 24px auto 32px;
}

.plan_image {
 position: relative;
 width: 92%;
 max-width: 1260px;
 margin: 0px auto 0;
 overflow: hidden;
}



@media only screen and (max-width:640px) {
.planWrap {
 padding: 64px 0 128px;
}

.plan_title {
}

.plan_title p {
 font-size: 2.2rem;
}

.plan_title p span {
 font-size: 2.2rem;
}

.plan_title figure {
 max-width: 580px;
}

.plan_image {
}

}








/* --------------------------------------------

動画

---------------------------------------------- */
.movieWrap {
 position: relative;
 padding: 150px 0 200px;
 background-color: rgb(209, 205, 177);
 background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 0),
  linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 0);
 background-size: 20px 20px;
 background-position: center;
}

.movieWrap .bgObj:nth-of-type(1) {
 top: -100px;
 left: 17%;
}

.movieWrap h2 {
 position: relative;
 margin: 0 0 20px;
 text-align: center;
 font-size: 10rem;
 line-height: 1;
 color: #fff;
 opacity: 0.7;
}

.movie {
 position: relative;
 width: 90%;
 max-width: calc(800px * 1.3);
 height: calc(90vw * 0.26);
 min-height: calc(455px * 1.3);
 margin: 0px auto 0px;
 background: #fff;
 border: 10px solid #fff;
}

.movie iframe {
 display: block;
 width: 100%;
 height: 100%;
}


@media only screen and (max-width:640px) {
 .movieWrap {
  padding: 150px 0 150px;
 }

 .movieWrap .bgObj:nth-of-type(1) {
  top: -80px;
  left: 11%;
 }

 .movieWrap h2 {
  font-size: 5rem;
 }

 .movie {
  min-height: calc(455px * 0.73);
 }

}



/* --------------------------------------------

ギャラリー

---------------------------------------------- */
.galleryWrap {
 position: relative;
 padding: 128px 0 48px;
 background-color: #F6F2DB;
}

.gallery_list {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 1360px;
 margin: 0px auto;
}

.gallery_item {
 width: calc(100% / 3 - 64px);
 max-width: 360px;
 margin: 0 32px 64px;
}

.gallery_item figure {
 position: relative;
}

.gallery_item figure::before {
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 right: 0;
 width: 45px;
 height: 45px;
 background-image: url(../_image/lp_machinaka/gallery-zoom.svg);
 z-index: 1;
}

.gallery_item figure a {
 display: block;
 height: 20vw;
 max-height: 215px;
 overflow: hidden;
}

.gallery_item figure a img {
 object-fit: cover;
 height: 100%;
}

.gallery_item p {
 font-size: 1.4rem;
 line-height: 3;
 letter-spacing: 0.2em;
}




@media only screen and (max-width:640px) {
 .galleryWrap {
 }

 .gallery_list {
 }

 .gallery_item {
  width: calc(100% / 2 - 48px);
 margin: 0 16px 32px;
 }

 .gallery_item figure a {
  height: 32vw;
 }
}






.gallery_modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 background-color: rgba(255, 255, 255, 0.9);
 cursor: pointer;
 display: none;
 z-index: 1;
}

.gallery_modal_bigimg {
 position: absolute;
 width: 65%;
 height: 70vh;
 top: calc(8vh - 0px);
 left: 0;
 right: 0;
 margin-right: auto;
 margin-left: auto;
 overflow: hidden;
}

.gallery_modal_bigimg img {
 height: 100%;
 object-fit: contain;
}

.gallery_modal_close {
 position: absolute;
 left: 0px;
 top: 0;
 width: 100%;
 height: 100vh;
 padding: 20px 0 0;
 text-align: center;
 cursor: pointer;
}

.gallery_modal_close a {
 position: absolute;
 left: calc(50% - 3em);
 bottom: calc(16vh - 0px);
 display: block;
 width: 6em;
 padding: 10px 0 0;
 font-size: 1.6rem;
 letter-spacing: 0.28em;
 color: #313131;
 text-align: center;
 border-bottom: 1px solid #313131;
 transition: 0.3s;
}

.gallery_modal_close a:hover {
 opacity: 0.6;
}


@media only screen and (max-width:640px) {

 .gallery_modal_bigimg {
  width: 86%;
 }

 .gallery_modal_close a {
  font-size: 1.3rem;
 }
}










/* --------------------------------------------


 来場予約


---------------------------------------------- */
.contactWrap {
 position: relative;
 padding: 118px 0;
 background: #fff;
}

.contactWrap h2 {
 width: 90%;
 max-width: 1000px;
 margin: auto;
 text-align: center;
 font-size: 3rem;
 line-height: 2.3;
 border: 1px solid #272727;
}

.contactWrap h3 {
 margin: 45px 0 24px;
 text-align: center;
 font-size: 2rem;
 font-weight: 600;
 line-height: 1.6;
}

.contactWrap h3 em {
 font-size: 1.25em;
}

.contactWrap p {
 position: relative;
 text-align: center;
}

.contactWrap p em {}

.contactWrap p b {
 display: block;
 width: 90%;
 max-width: 800px;
 margin: auto;
 padding: 10px;
 text-align: center;
 font-size: 1.8rem;
 font-weight: 500;
 background-color: #FBEB00;
}

.contactWrap p .linkBtn {
 max-width: 420px;
 margin: 12px auto;
 font-size: 2rem;
 line-height: 4em;
}

.contactWrap p a.ff-eng {
 font-size: 3.2rem;
 letter-spacing: 0.05em;
 font-weight: 500 !important;
}

.contact_park {
 width: 92%;
 max-width: 600px;
 margin: 0px auto;
}

.contact_map {
 position: relative;
 width: 92%;
 max-width: 1200px;
 height: 500px;
 margin: 50px auto;
}

.contact_map iframe {
 width: 100%;
 height: 100%;
}

@media only screen and (max-width:640px) {
 .contactWrap {
 }

 .contactWrap h2 {
 font-size: 2rem;
 }

 .contactWrap h3 {
  font-size: 1.8rem;
 }

 .contactWrap h3 em {
 }

 .contactWrap p {}

 .contactWrap p .linkBtn {
  line-height: 3em;
 }

 .contactWrap p a.ff-eng {
  font-size: 2.8rem;
 }

 .contact_map {}

 .contact_map iframe {
  width: 71%;
  height: 71%;
  transform: scale(1.4);
  transform-origin: left top;
 }
}











/* --------------------------------------------

フッター固定バー

---------------------------------------------- */

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











/* --------------------------------------------

フッター固定バー

---------------------------------------------- */

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









/* --------------------------------------------

フッター固定バー

---------------------------------------------- */
.footerBar {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 90px;
 background-color: #f6f5f1;
 z-index: 9999;
 opacity: 0;
 z-index: 100;
}

.footerBar a {
 position: absolute;
 top: 0;
 left: calc(50% - 40px);
 display: block;
 width: 280px;
 height: 100px;
 background-color: #f6f5f1;
 opacity: 0;
 transition: 0.3s;
}

.footerBar a:nth-of-type(2) {
 left: calc(50% + 250px);
}

.footerBar a:hover {
 opacity: 0.6;
}

.footerBar img {
 display: block;
 margin: auto;
 max-width: 1060px;
}


@media only screen and (max-width:640px) {
 .footerBar {
  height: auto;
 }

 .footerBar a {
  left: calc(50% - 95px);
  width: 320px;
  height: 90px;
 }

 .footerBar a:nth-of-type(2) {
  left: calc(50% + 225px);
  width: 80px;
 }

 .footerBar img {}
}




/* スクロールアクション ------------------------- */
.footerBar.is-animation {
 animation: footerBar 1.0s ease 0s 1 forwards;
}


@keyframes footerBar {
 0% {
  opacity: 0;
  transform: translateY(40px) translateX(0);
 }

 100% {
  opacity: 1;
  transform: translateY(0px) translateX(0);
 }
}