.mv {
    aspect-ratio: auto
}

.mv .inner {
    margin-top: -20%;
    position: relative;
    z-index: 1
}
.general-section .inner {
    max-width: 1270px;
    width: 60%;
}

.sec .inner .lead {
    font-size: 3rem
}

.image-section {
  position: relative;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
    max-height: 745px;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; 
}
.general-section{
    background-color: #f5ebe8;
}
.general-section .inner{
    z-index: 3;
    text-align: center;
}
.general-section .section-bg{
    position: relative;
}
.general-section .section-bg::before{
    	content: "";
    background-image: url(../images/plan/plan-bg.webp);
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 0;
    background-position: bottom;
}
.next-section {
    background-color: #f5ebe8;
    padding: 0px;
    text-align: center;
    margin-top: -7vh;
    position: relative;
    z-index: 2;
}
.next-section p{
    color: #b37b7a;
}
.next-section p.tertiary-heading{
    color: #604c3f;
}
.caption{
    position: absolute;
    bottom: 13vh;
    right: 1vw;
}
.vertical-line:after{
    content: unset;
}
.vertical-line:before{
    content: '';
    display: block;
    width: 2px;
    height: 80px;
    background: #b37b7a;
    margin: 30px auto 10px;
    position: relative;
    top: -30px;
}
img{
    width: 100%;
}
.bnr-btn{
  position: absolute;
    left: 7%;
    bottom: 36%;
  color: #fff;
  font-size: 1vw;
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 10px 30px;
	transition: all .3s ease-out;
}
.bnr-btn:hover{
	color: #594c3c;
	background: #fff;
}
.bnr02 .bnr-btn:hover{
	color: #4f6964;
}
.bnr02 .bnr-btn{
    bottom: 28.5%;
}
.bnr-btn:before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    margin: auto;
    right: -10px;
    width: 20px;
    height: 1px;
    background-color: #fff;
    transition: .3s;
}
.bnr-btn:hover:before{
    background-color: #594c3c;
} 
@media screen and (max-width:1650px) {

/* .bnr-btn{
  left: 4.5vw;
}
.bnr02 .bnr-btn{
    bottom: 16%;
} */
}
@media screen and (max-width:1200px) {
.general-section .inner {
    max-width: 1270px;
    width: 80%;
}
.bnr-btn{
  left: 9vh;
}
}
@media screen and (max-width:900px) {
.general-section .inner {
    width: 95%;
}
}
.plan-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 70px;
    margin: 50px auto 32px;
}
.plan-cards .plan-card {
    width: calc(30% - 35px);
}
.floor-img{
    width: 80%;
    margin: auto;
    padding-bottom: 80px;
}
@media screen and (max-width: 1000px) {
  .plan-cards {
    gap: 40px;
  }
  .general-section .plan-inner {
    width: calc(100% - 20px);
  }
}
@media screen and (max-width: 767px) {
  .bnr-btn{
    left: 8%;
    font-size: 1.6vw;
    padding: 2px 10px;
  }
  .floor-img{
      width: 100%;
  }
  /* .bnr02 .bnr-btn{
    bottom: 18%;
  } */
  .bnr-btn:before{
    right: -8px;
    width: 15px;
  }
}
@media screen and (max-width: 767px) {
  .plan-cards {
    gap: 32px;
  }
  .general-section .plan-inner {
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 767px) {
    .sec .inner .lead {
        font-size:2rem
    }
    .image-wrapper img {
        height: 100vh;
        max-height: 250px;
        object-fit: cover;
    }
    .curve {
        left: -50%;
        width: 200%;
        height: 100px;
    }
    .vertical-line:before {
        height: 50px;
        top: -10px;
    }
}

@keyframes blurZoomIn {
	from {
		opacity: 0;
		filter: brightness(1.8) blur(20px);
		transform: scale3d(1.1, 1.1, 1.1);
	}
	50% {
		filter: brightness(1) blur(0);
		opacity: 1;
	}
}
.blurZoomIn {
	animation-name: blurZoomIn;
}
@keyframes blurFadeIn {
	from {
		opacity: 0;
		filter: blur(20px);
	}
	50% {
		filter: blur(0);
		opacity: 1;
	}
}


.plan-btns {
  margin: 0 auto 80px;
  max-width: 750px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.plan-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #24524C;
  border: 1px solid #24524C;
  width: calc(50% - 16px);
  height: 60px;
  font-size: 2rem;
  cursor: pointer;
}

.beaute-wrap2{
  margin: 0 auto 100px;
  width: 60%;
}
.beaute-wrap3{
  margin: 0 auto 100px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .beaute-wrap2,.beaute-wrap3{
    max-width: 245px;
    width: 65%;
  }
  .hamburger, .sp-tel-btn{
    display: flex;
  }
}
.plan-link-btns {
  margin: 32px auto 0;
  max-width: 1090px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.plan-link-btn {
  width: calc(50% - 16px);
  max-width: 300px;
}

.plan-link-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #003932;
  border: 1px solid #003932;
  height: 60px;
  font-size: 2rem;
  cursor: pointer;
}

.plan-cta-btns {
  margin: 32px auto 0;
  max-width: 1090px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.plan-cta-btn {
  width: calc(50% - 16px);
  max-width: 300px;
}

.plan-cta-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2c2c2c;
  background: rgb(233, 197, 199);
  height: 60px;
  font-size: 2rem;
  cursor: pointer;
  position: relative;
}

.plan-btn.is-active {
  background: #345954;
  color: #fff;
}

.plan-next-btn {
  width: calc(50% - 16px);
  max-width: 300px;
}
.plan-next-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #345954;
  background: #fff;
  border: 1px solid #345954;
  height: 60px;
  font-size: 2rem;
  cursor: pointer;
  position: relative;
}

.req-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 30px;
}
@media screen and (max-width: 767px) {
  .req-icon {
    width: 24px;
  }
}

.res-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  width: 30px;
}
@media screen and (max-width: 767px) {
  .res-icon {
    position: absolute;
    width: 24px;
  }
}
.detail-loan-badge{
  position: absolute;
  top: -9%;
  left: -20%;
  width: 40%;
}
@media screen and (max-width: 767px) {
  .plan-btns {
    margin: 0 auto 20px;
    gap: 8px;
  }
  .plan-btn {
    width: calc(50% - 4px);
    height: 48px;
    font-size: 1.6rem;
  }
  .plan-link-btns {
    margin: 32px auto 0;
    gap: 16px;
  }
  .plan-link-btn {
    width: calc(50% - 8px);
  }
  .plan-link-btn a {
    height: 48px;
    font-size: 1.6rem;
  }
  .plan-cta-btns {
    margin: 16px auto 0;
    gap: 16px;
  }
  .plan-cta-btn {
    width: calc(50% - 8px);
  }
  .plan-cta-btn a {
    height: 48px;
    font-size: 1.6rem;
  }
  .plan-cta-btn a .req-icon {
    width: 20px;
  }
  .plan-next-btn {
    width: calc(50% - 8px);
  }
  .plan-next-btn a {
    height: 48px;
    font-size: 1.6rem;
  }
  .detail-loan-badge{
    display: none;
  }
  .hamburger, .sp-tel-btn{
    display: flex;
  }
  .caption{
    bottom: 17vw;
  }
}
@media print {
  .plan-detail header, .plan-detail .hamburger,
  .plan-detail .plan-link-btns, .plan-detail .plan-cta-btns,
  .plan-detail .img-wrapper, .plan-detail footer {
    display: none;
  }
}