@charset "utf-8";
/* Responsive Design */
@media (max-width: 1060px) {
  .fv__image img{
   width: 53%;
  }
}

@media (max-width: 900px) {

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  .problem__before,
  .problem__after {
    min-width: 200px;
  }

  .contact__col {
    min-width: 0;
    width: 100%;
    padding: 24px 10px 18px 10px;
  }
  .contact__col--form, .contact__col--tel {
    margin: 0;
  }
}



@media (max-width: 768px) {
  
  .fv__inner {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }
  .fv__title-banner-group{
    align-items: center;
    gap: 6px;
  }

  
  .fv__description {
    font-size: 16px;
  }
  
  .fv__banner-award {
    order: 1;
  }
  .fv__banner-award img, .service__banner-award img{
    width: 5rem;
  }
  
  .fv__banner-content {
    order: 2;
  }
  .fv__banner-text,.service__banner-text {
    font-size: 0.9rem;
    font-weight: 400;
  }
  /* Problem Section */
  .problem {
    padding: 60px 0;
  }
  
  .problem__inner {
    padding: 0 15px;
  }
  
  .problem__title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .problem__subtitle {
    font-size: 20px;
  }
  
  .problem__icon img {
    width: 140px;
    height: 130px;
  }

  /* Service Section */
  .service {
    padding: 60px 0;
  }
  
  .service__inner {
    padding: 0 15px;
  }
  
  .service__title {
    font-size: 24px;
  }
  
  .service__description {
    font-size: 16px;
    margin-bottom: 40px;
  }
  
  .service__comparison {
    grid-template-columns: 1fr;
  }
  
  .service__plus {
    text-align: center;
    font-size: 24px;
  }
  
  .service__point-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .fv__banner-inner, .service__banner-inner{
    gap: 15px;
    padding: 0 2rem;
  }
  .fv__title-banner__big {
    font-size: 26px;
  }
  .fv__title-banner__big_2 {
    font-size: 36px;
  }
  /* Pricing Section */
  .pricing {
    padding: 60px 0;
  }
  
  .pricing__inner {
    padding: 0 15px;
  }
  
  .pricing__title {
    font-size: 24px;
  }
  
  .pricing__price {
    font-size: 36px;
  }
  
  .pricing__features {
    padding: 30px 20px;
  }

  /* Flow Section */
  .flow {
    padding: 60px 0;
  }
  
  .flow__inner {
    padding: 0 15px;
  }
  
  .flow__title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .flow__steps {
    flex-direction: column;
    gap: 30px;
  }
  
  .flow__arrow {
    transform: rotate(90deg);
  }
  
  .flow__step {
    min-width: auto;
    max-width: none;
  }

  /* FAQ Section */
  .faq {
    padding: 60px 0;
  }
  
  .faq__inner {
    padding: 0 15px;
  }
  
  .faq__title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .faq__question,
  .faq__answer {
    gap: 15px;
  }
  
  .faq__q,
  .faq__a {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* Contact Section */  
  .contact__inner {
    padding: 0 15px;
  }
  
  .contact__title {
    font-size: 24px;
  }
  
  .contact__box {
    padding: 30px 20px;
  }
  
  .contact__phone-number {
    font-size: 24px;
  }

  /* Footer */
  .footer {
    padding: 2rem 1rem 1rem;
  }
  
  .footer__nav {
    justify-content: flex-start;
    gap: 15px;
    margin-top: 1rem;
  }
  
  .footer__contact {
    text-align: left;
  }
  
  .footer__bottom {
    justify-content: center;
    flex-direction: column;
    gap: 0;
  }

  .footer__company{
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
    .fv__title-banner {
      font-size: 18px;
      padding: 8px 12px;
      z-index: 0;
    }
    .fv__catch {
      font-size: 1rem;
      margin: 0 0 10px 0;
      text-align: center;
    }
    .fv__title {
      margin-bottom: 18px;
      text-align: center;
    }
    .fv__price {
      margin: 0 auto 20px;
    }
    .fv__price-text{
      font-size: 1.2rem;
    }
    .fv__cta {
      text-align: center;
    }
    .fv__image{
  margin-bottom: 1rem;
    }
    .service__comparison {
      flex-direction: column;
    }
    .service__regular, .service__check {
      width: 70%;
      margin: 0 auto;
    }
    .service__plus {
      font-size: 2.5rem;
      line-height: 2rem;
      margin: 0 auto;
    }

    .service__point-header {
      width: 2rem;
    }
    .service__point-content p {
      font-size: 1rem;
    }
    .flow__steps {
      flex-direction: column;
      gap: 20px;
      align-items: stretch;
    }
    .flow__step {
      width: 100%;
      min-height: 0;
      max-width: none;
      margin: 0 auto;
    }
    
    .flow__step-title{
    min-height: auto;
    }
    .flow__arrow {
      transform: rotate(90deg);
      margin: 0 auto;
    }
    p.flow__step-description{
      margin: revert;
    }
    .btn--large {
      font-size: 1rem;
      padding: 10px 16px;
    }
    h2 {
      font-size: 1.3rem;
      margin-bottom: 3rem;
      padding-bottom: 0.1rem;
    }
    .problem__arrow img {
      width: 54px;
      height: 54px;
    }

}
@media (max-width: 600px) {
  .header__logo img{
    height: 25px;
  }
  .pricing__feature{
    margin-bottom: 0.4em;
  }
  .pricing__features{
    padding: 0 15px;
  }
  .pricing__cta .btn--orange {
    padding: 1em 1.6em;
  }
  .contact__row {
    flex-direction: column;
    gap: 24px;
    padding: 20px 0 40px 0;
  }
  .pricing__inner {
    max-width: 95vw;
    padding: 0 0 24px 0;
  }
  .pricing__features {
    padding: 1em 0.5em 1em 1.5em;
    width: 98%;
  }
  .pricing__subtitle {
    font-size: 1rem;
    padding: 12px 0 10px 0;
  }
  .pricing__price {
    font-size: 2rem;
  }
  .problem__comparison {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
  }

  .problem__arrow {
    transform: rotate(90deg);
  }
  
} 

@media (max-width: 480px) {

.fv__title-banner-group {
  white-space: pre-line;
}
  .contact__col .btn{
    padding: 8px;
    font-size: 16px;
  }
  .pc-hidden {
    display: none;
  }
  .service__description{
    text-align: left;
  }
  .btn{
    gap: 0px;
    padding: 4px;
    font-size: 13px;
  }
  .header__inner{
    padding: 0px 8px;
  }
  .fv__price-text{
    width: 33%;
    padding: 16px;
  }
  .fv__title-banner {
    font-size: 17px;
    padding: 8px 12px;
  }
  
  .fv__description {
    font-size: 14px;
    line-height: 1.4;
    padding: 6px 16px;
  }
  
  .fv__image img {
      width: 88%;
  }
  .fv__price {
    margin: 70px auto 20px;
    width: fit-content;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    padding: 12px;
    font-weight: 500;
}
.fv__banner-inner, .service__banner-inner{
  padding: 0 10px;
  gap: 0.2rem;
}
.fv__banner-note, .service__banner-note{
  font-size: 9px;
}
  .problem__subtitle {
    font-size: 18px;
  }
  
  .problem__icon img {
    width: 80px;
    height: 80px;
  }
  
  .problem__arrow img {
    width: 50px;
    height: 50px;
  }
  
  .pricing__price {
    font-size: 28px;
  }
  
  .contact__phone-number {
    font-size: 20px;
  }
  
  .service__point_text {
    padding: 1rem;
  }
  .service__point-time{
    font-size: 1.3rem;
  }
  
  .service__regular,
  .service__check {
    width: 100%;
  }
  
  .pricing__features {
    padding: 0 15px;
  }
  
  .contact__box {
    padding: 25px 15px;
  }
  
  .btn--large {
    padding: 10px 16px;
    font-size: 13px;
  }
  .fv__inner {
    padding: 0 5px;
  }
  .fv__title-banner__big {
    font-size: 17px;
}
.fv__title-banner__big_2 {
  font-size: 17px;
}
  .service__point-header {
    display: none;
  }
  .service__point-content p {
    font-size: 0.85rem;
  }

  .btn--large {
    font-size: 0.95rem;
    padding: 8px 10px;
  }
  h2 {
    font-size: 1.1rem;
  }
  .service__cta-inner{
    background-position: center;
  }
  .service__cta-text p{
    font-size: 0.9rem;
  }
  .service__cta-title{
    font-size: 1.3rem;
  }
  .footer__contact .btn{
    padding: 12px;
    font-size: 16px;
  }
}