@charset "utf-8";

.plan-fv{
  padding:250px 0 0;
  position:relative;
}

.plan-fv::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260304182403551109.png) no-repeat top center/cover;
}

.plan-fv h1{
  width:80%;
  margin: 0 auto -1.5rem;
  max-width: 1345px;
  color: #0171AF;
  font-size: clamp(3rem, 1.364rem + 5.45vw, 7.5rem);
  line-height: 1;
}

.plan-fv div{
  padding:100px 0 10rem;
  background:#0171AF;
  color:#fff;
}

.plan-fv div p{
  width:80%;
  margin:0 auto;
  max-width:1345px;
  line-height: calc(40 / 24);
  font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
}

.rental{
  margin:10rem 0;
}

.rental h2,
.plan h2{
  color:#0171AF;
  font-size:clamp(2.5rem, 1.591rem + 3.03vw, 5rem);
  margin-bottom:5rem;
}

.plan{
  margin-top:5rem;
  position:relative;
}

.plan::before{
  content:"";
  position:absolute;
  width:100%;
  aspect-ratio:1924/304;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260304180827565986.png) no-repeat center/contain;
  top: 99%;
  left:0;
  z-index:-1;
}

.plan .container{
  max-width:1040px;
}

.plan-item{
  display:flex;
  padding:0 5% 3rem;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top:5rem;
  z-index: 10;
}

.plan-item::before{
  content:"";
  position:absolute;
  width:100%;
  height:85%;
  border:0.8px solid #0071AF;
  bottom:0;
  left:0;
  z-index:-1;
}

.plan-item::after{
  content:"";
  position:absolute;
  width:100%;
  height:80%;
  background:#fff;
  bottom:0;
  left:0;
  z-index:-10;
}

.plan-item img{
  width:43%;
  border:5px solid #0171AF;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.plan-txt{
  width:52%;
}

.plan-item h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  color:#0171AF;
  margin-bottom:5rem;
}

.plan-item h3 + p{
  margin-bottom:1.5rem;
}


.rental-list{
  display:flex;
  text-align:left;
  padding:1rem 0;
  border-bottom:0.5px solid #0171AF;
  gap:1rem;
  align-items: center;
}

.rental .rental-list{
  max-width:320px;
  margin:0 auto;
}

.rental-list p:first-child{
  color:#0171AF;
  font-size:1rem;
  width:70px;
  text-align: left;
}

.rental-list p:last-child{
  font-size:14px;
  text-align: left;
}

.rental-list:last-child{
  border:none;
}

.rental .container{
  max-width:1345px;
}

.rental .activity-wrap{
  max-width: none;
  gap:3.5rem 1.5rem;
}

.activity-item{
  border:none;
  position:relative;
  background:transparent;
  color:#575757;
}

.activity-item img{
  max-width:280px;
  margin:0 auto 1.5rem;
}

.activity-item h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  text-align:left;
  max-width:320px;
  margin:0 auto;
}

.activity-item::before{
  content:"";
  position:absolute;
  width:100%;
  height:80%;
  border:0.8px solid #0071AF;
  bottom:0;
  left:0;
  z-index:-1;
}

@media (max-width: 1279px) {
  .plan-fv h1{
    margin: 0 auto -0.9rem;
  }
  .activity-item{
    width: calc((100% - 1.5rem) / 2);
  }
}

@media (max-width: 1024px) {
  .plan-fv h1 {
    margin: 0 auto -0.7rem;
  }
  .plan-item h3{
    margin-bottom: 3rem;
  }
  .plan-item::before{
    height: 89%;
  }
}

@media (max-width: 767px) {
  .activity-item {
    width: 100%;
  }
  .rental .activity-wrap {
    gap: 2.5rem 1.5rem;
  }
  .rental h2, .plan h2{
    margin-bottom: 2rem;
  }
  .plan-fv::before{
    height:auto;
    aspect-ratio: 5 / 3;
  }
  .plan-fv {
    padding: 180px 0 0;
  }
  .plan-fv h1 {
    margin: 0 auto -0.6rem;
    width: 90%;
  }
  .plan-fv div p{
    width: 90%;
  }
  .plan-fv div {
    padding: 48px 0 5rem;
  }
  .plan-item{
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    margin-top: 3rem;
    padding-bottom: 0.5rem;
  }
  .plan-item img {
    width: 90%;
  }
  .plan-txt {
    width: 100%;
  }
  .plan-item h3 {
    margin-bottom: 1rem;
  }
  .rental{
    margin:5rem 0;
  }
}