/*#region var*/
@media (max-width: 991px) {
    :root {
        --headerH: 70px;
    }
}

@media (max-width: 768px) {
    :root {
        --pxunit: 8px;
        --font-size14: .7rem;
        --font-size16: .8rem;
        --font-size18: .9rem;
        --font-size20: 1rem;
        --font-size22: 1.1rem;
        --font-size24: 1.2rem;
        --font-size26: 1.3rem;
        --font-size28: 1.4rem;
        --font-size30: 1.5rem;
        --font-size32: 1.6rem;
        --font-size36: 1.7rem;
        --font-size38: 1.8rem;
        --font-size40: 2rem;
        --gap-unit: .4rem;
        --margin: 2.5rem;
        --border-radius: .4rem;
    }
}

@media (max-width: 450px) {
    :root {
        --font-size14: 1.4rem;
        --font-size16: 1.6rem;
        --font-size18: 1.8rem;
        --font-size20: 2rem;
        --font-size22: 2.2rem;
        --font-size24: 2.4rem;
        --font-size26: 2.6rem;
        --font-size28: 2.8rem;
        --font-size30: 3rem;
        --font-size32: 3.2rem;
        --font-size36: 3.6rem;
        --font-size38: 3.8rem;
        --font-size40: 4rem;
        --gap-unit: .8rem;
        --margin: 1.7rem;
        --border-radius: .8rem;
    }
}

/*#endregion var*/

/*#region HEADER*/
@media (max-width: 768px) {
    .header {
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 25px;
        background-color: var(--bg-white-color);
    }

    .header__logo {
        width: 120px;
    }

    .header__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        gap: 15px;
        z-index: 120;
        transform: scale(0.95);
        pointer-events: none;
        background-color: var(--bg-white-color);
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        transition: 0.6s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: opacity, transform;
        opacity: 0;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        padding-top: 15vh;
    }

    .header__menu.is-open {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        pointer-events: auto;
    }

    .headmenu__a {
        padding: 8px 10px;
        height: auto;
    }

    .headmenu__a::after {
        display: block;
    }
    
    .headmenu__btn {
        font-size: 15px;
        padding: 10px 30px;
        margin: 10px 0 0;
    }

    .headmenu__cap {
        color: var(--bg-black-color);
        font-size: 16px;
        letter-spacing: 1px;
    }

    .hamburger__set {
        display: block;
    }
}

@media (max-width: 576px) {
    .header {
        padding: 0 15px;
    }

    .header_logo img {
        height: 35px;
    }
}

/*#endregion HEADER*/

/*#region COMMON*/
@media (max-width: 768px) {
    .sec__inner {
        gap: calc(var(--gap-unit)*4);
    }

    .sec__heading {
        gap: calc(var(--gap-unit)*1.5);
    }

    .sec__title {
        font-size: var(--font-size30);
        line-height: 1.45;
    }

    .sec__lead {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .sec__inner {
        gap: calc(var(--gap-unit)*3);
    }

    .sec__title {
        font-size: var(--font-size24);
    }

    .is-PC {
        display: none !important;
    }

    .is-SP {
        display: block !important;
    }
}
/*#endregion COMMON*/

/*#region BANNER*/
@media (max-width: 768px) {
    .banner__inner {
        padding-top: 6rem;
    }

    .banner__content {
        width: 100%;
        left: 0;
        padding: 0 var(--margin);
        gap: 8rem;
    }

    .banner__title {
        font-size: var(--font-size40);
    }

    .banner__title span {
        font-size: 3rem;
    }
    
    .banner__img {
        width: 100%;
    }

    .banner__btn-arrow {
        width: 1rem;
    }
}

@media (max-width: 450px) {
    .banner__inner {
        padding-top: calc(var(--headerH) + 4rem);
        padding-bottom: calc(var(--gap-unit)*5);
    }

    .banner__content {
        position: static;
        gap: 22rem;
    }

    .banner__img {
        position: absolute;
        top: 35%;
        width: 100%;
    }

    .banner__cta {
        flex-direction: column;
        gap: calc(var(--gap-unit)*1);
    }

    .banner__btn {
        font-size: var(--font-size16);
    }

    .banner__btn-arrow {
        width: 1.8rem;
    }

    .banner__main {
        gap: calc(var(--gap-unit)*1.5);
    }

    .banner__lead {
        font-size: var(--font-size16);
    }

    .banner__title span {
        font-size: 4.6rem;
    }

    .banner__title {
        font-size: var(--font-size36);
    }

    .banner__txt {
        font-size: var(--font-size16);
        color: #333;
    }
}
/*#endregion BANNER*/

/*#region PROBLEM*/
@media (max-width: 768px) {
    .problem__main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--gap-unit)*2);
    }

    .problem__item {
        width: 100%;
        padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*3);
    }

    .problem__icon {
        width: 1.2rem;
        height: 1.2rem;
    }

    .problem__icon svg {
        width: .6rem;
    }
    
    .problem__txt {
        font-size: var(--font-size18);
    }

    .solution__main {
        padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*4);
    }

    .solution__title {
        font-size: var(--font-size28);
    }

    .solution__title span {
        font-size: var(--font-size36);
    }

    .solution__txt {
        font-size: var(--font-size16);
    }

    .solution__img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 45%;
    }

    .solution__img img {
        position: static;
        width: 100%;
        transform: translateX(0%);
    }
}

@media (max-width: 450px) {
    .problem__contnet {
        gap: calc(var(--gap-unit)*4);
    }

    .problem__main {
        grid-template-columns: repeat(1, 1fr);
    }

    .problem__item {
        align-items: center;
        gap: calc(var(--gap-unit)*.8);
        padding: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .problem__icon {
        width: 1.9rem;
        height: 1.9rem;
        margin: 0;
    }

    .problem__icon svg {
        width: 1rem;
    }

    .problem__txt {
        font-size: var(--font-size16);
    }

    .problem__txt br {
        display: none;
    }

    .problem__solution {
        overflow-x: clip;
        border-radius: var(--border-radius);
    }

    .solution__main {
        position: relative;
        grid-template-columns: repeat(1, 1fr);
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2);
        z-index: 2;
    }

    .solution__title {
        font-size: var(--font-size16);
        line-height: 1.6;
    }

    .solution__title span {
        font-size: var(--font-size24);
    }

    .solution__txt {
        font-size: var(--font-size14);
    }

    .solution__img {
        width: 59%;
        right: -4rem;
    }
}
/*#endregion PROBLEM*/

/*#region REASONS*/
@media (max-width: 768px) {
    .reasons__content {
        flex-wrap: wrap;
        gap: calc(var(--gap-unit)*2);
    }

    .reasons__item {
        flex: 1 1 calc(50% - var(--gap-unit));
        min-width: calc(50% - var(--gap-unit));
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2);
    }

    .reasons__icon {
        height: 3rem;
    }

    .reasons__item-title {
        font-size: var(--font-size20);
        margin-bottom: calc(var(--gap-unit)*2);
    }

    .reasons__item-txt {
        font-size: .75rem;
    }

    .reasons__item-txt br {
        display: none;
    }
}

@media (max-width: 450px) {
    .reasons__title .reasons__num {
        font-size: 1.7em;
        line-height: 1;
    }

    .reasons__content {
        gap: var(--gap-unit);
    }

    .reasons__item {
        flex: 0 0 calc(50% - var(--gap-unit)*.5);
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*.5) calc(var(--gap-unit)*2);
    }

    .reasons__icon {
        width: 7rem;
        margin-bottom: calc(var(--gap-unit)*2);
    }

    .reasons__item-title {
        font-size: 1.6rem;
        margin-bottom: calc(var(--gap-unit)*1);
    }

    .reasons__item-txt {
        font-size: 1.2rem;
    }

    .reasons__item-txt br,
    .reasons__item-title br {
        display: block;
    }
}
/*#endregion REASONS*/

/*#region COMPARE*/
@media (max-width: 768px) {
    .compare__content {
        gap: calc(var(--gap-unit)*2);
    }

    .compare__box-head {
        font-size: var(--font-size24);
        padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
    }

    .compare__box-head span {
        font-size: var(--font-size18);
    }

    .compare__box-body {
        padding: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*2);
    }

    .compare__box-label {
        font-size: var(--font-size20);
    }

    .compare__box-label span {
        font-size: var(--font-size16);
    }

    .compare__box-txt {
        font-size: var(--font-size14);
        margin-bottom: calc(var(--gap-unit)*2);
    }

    .compare__flow {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: calc(var(--gap-unit)*.5);
        padding-bottom: calc(var(--gap-unit)*1);
        -webkit-overflow-scrolling: touch;
    }

    .compare__step-icon {
        height: 2.5rem;
    }

    .compare__step-txt {
        font-size: var(--font-size14);
        margin-top: 0;
    }

    .compare__arrow {
        flex-shrink: 0;
        width: .8rem;
        align-self: center;
        margin-bottom: calc(var(--gap-unit)*2);
    }

    .compare__box-foot {
        font-size: var(--font-size14);
        padding: calc(var(--gap-unit)*2);
    }
}

@media (max-width: 450px) {
    .compare__title {
        font-size: var(--font-size18);
        line-height: 1.6;
    }

    .compare__content {
        flex-direction: column;
    }

    .compare__box {
        flex: 0 0 auto;
    }

    .compare__step {
        gap: calc(var(--gap-unit)*1);
    }

    .compare__arrow {
        width: 1.5rem;
    }

    .compare__step-icon {
        height: 5rem;
    }

    .compare__box-txt,
    .compare__box-foot {
        font-size: var(--font-size16);
    }
}
/*#endregion COMPARE*/

/*#region RESULTS*/
@media (max-width: 768px) {
    .results__content {
        flex-wrap: wrap;
        padding: calc(var(--gap-unit)*3) 0;
    }

    .results__item {
        padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*1.5);
    }

    .results__icon {
        height: 2.5rem;
    }

    .results__label {
        font-size: var(--font-size14);
    }

    .results__value span {
        font-size: var(--font-size40);
    }

    .results__note {
        width: 100%;
        margin-top: calc(var(--gap-unit)*2);
        font-size: var(--font-size14);
    }
}

@media (max-width: 450px) {
    .results__content {
        padding: calc(var(--gap-unit)*2) 0;
    }

    .results__item {
        flex: 0 0 50%;
        border-bottom: 1px solid #E8EBE9;
        border-right: 1px solid #E8EBE9;
        padding: calc(var(--gap-unit)*3) 0;
    }

    .results__divider {
        display: none;
    }

    .results__item:nth-child(5),
    .results__item:nth-child(7) {
        border-bottom: none;
    }

    .results__icon {
        height: 5rem;
        margin-bottom: calc(var(--gap-unit)*1.5);
    }

    .results__label {
        font-size: 1.5rem;
        margin-bottom: calc(var(--gap-unit)*1);
    }

    .results__value {
        font-size: var(--font-size20);
    }

    .results__value span {
        font-size: var(--font-size36);
    }
}
/*#endregion RESULTS*/

/*#region CASES*/
@media (max-width: 768px) {
    .cases__tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--gap-unit)*1.5);
    }

    .cases__tab {
        width: 100%;
        padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
        font-size: var(--font-size14);
    }

    .cases__card {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2.5);
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*4) calc(var(--gap-unit)*4);
    }

    .cases__img {
        width: 100%;
        height: 18rem;
    }

    .cases__content {
        padding: 0;
        gap: calc(var(--gap-unit)*2);
    }

    .cases__card-title {
        text-align: center;
    }

    .cases__metric {
        flex: 1;
    }

    .cases__metric-label {
        font-size: var(--font-size18);
    }

    .cases__metric-value span {
        font-size: var(--font-size40);
    }

    .cases__btn {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .cases__card {
        margin: 0;
        width: 100%;
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2);
    }

    .cases__tabs {
        gap: calc(var(--gap-unit));
    }

    .cases__tab {
        font-size: 1.5rem;
    }

    .cases__metric-label {
        font-size: var(--font-size14);
    }

    .cases__metric-value {
        font-size: var(--font-size20);
    }

    .cases__metric-value span {
        font-size: var(--font-size36);
    }

    .cases__card-title {
        font-size: 1.7rem;
        margin-top: 0;
    }

    .cases__btn {
        font-size: 1.5rem;
        padding: calc(var(--gap-unit)*1.7) calc(var(--gap-unit)*3);
    }
}
/*#endregion CASES*/

/*#region FLOW*/
@media (max-width: 768px) {
    .flow__main {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: calc(var(--gap-unit)*1);
        padding-bottom: calc(var(--gap-unit)*2);
    }

    .flow__item {
        flex: 1;
        padding: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*1.5);
    }

    .flow__arrow {
        flex-shrink: 0;
        width: .8rem;
        margin-top: 0;
        align-self: center;
    }

    .flow__icon {
        height: 2.5rem;
        margin-bottom: calc(var(--gap-unit)*1.5);
    }

    .flow__title {
        font-size: var(--font-size18);
    }

    .flow__txt {
        font-size: var(--font-size14);
    }
}

@media (max-width: 450px) {
    .flow__main {
        flex-wrap: wrap;
    }

    .flow__item {
        flex: 0 0 46%;
        padding: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
    }

    .flow__icon {
        height: 4.5rem;
    }

    .flow__arrow {
        width: 1.5rem;
    }
}
/*#endregion FLOW*/

/*#region CTA*/
@media (max-width: 768px) {
    .cta-block__inner {
        padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*3);
        border-radius: calc(var(--gap-unit)*1.5);
    }

    .cta-block__title {
        font-size: var(--font-size32);
    }

    .cta-block__txt {
        font-size: var(--font-size16);
        margin-bottom: calc(var(--gap-unit)*3);
    }

    .cta-block__btns {
        width: 100%;
        gap: calc(var(--gap-unit)*1.5);
    }

    .cta-block__btn {
        flex: 1;
        padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*3);
        font-size: var(--font-size14);
    }
}

@media (max-width: 450px) {
    .cta-block__inner {
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*2);
    }
    .cta-block__title {
        font-size: 2.3rem;
    }

    .cta-block__txt {
        font-size: 1.5rem;
    }

    .cta-block__btns {
        flex-direction: column;
    }

    .cta-block__btn {
        font-size: 1.5rem;
    }
}
/*#endregion CTA*/

/*#region PRICING*/
@media (max-width: 768px) {
    .pricing__inner {
        gap: calc(var(--gap-unit)*3);
    }

    .pricing__lead {
        font-size: var(--font-size16);
    }

    .pricing__content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*3);
    }

    .pricing__card {
        padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*3);
    }

    .pricing__meta {
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--gap-unit)*.6);
    }

    .pricing__name {
        font-size: var(--font-size18);
    }

    .pricing__price {
        font-size: var(--font-size16);
    }

    .pricing__price span {
        font-size: var(--font-size28);
    }

    .pricing__list li {
        font-size: var(--font-size14);
    }

    .pricing__list li::before {
        width: 1rem;
        height: 1rem;
        background-size: .5rem;
    }

    .cta-block__btn {
        min-width: unset;
    }

    .pricing__note {
        font-size: var(--font-size14);
        line-height: 1.7;
    }
}

@media (max-width: 450px) {
    .pricing__inner {
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*2);
    }

    .pricing__lead {
        font-size: 1.5rem;
    }

    .pricing__content {
        gap: calc(var(--gap-unit)*2);
    }

    .pricing__card {
        padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*3) calc(var(--gap-unit)*3);
    }
    .pricing__meta {
        margin-bottom: calc(var(--gap-unit));
    }

    .pricing__badge {
        font-size: 1.2rem;
    }

    .pricing__price {
        margin-bottom: calc(var(--gap-unit)*1.5);
    }

    .pricing__list li::before {
        width: 2rem;
        height: 2rem;
        background-size: 1rem;
    }
}
/*#endregion PRICING*/

/*#region CONTACT*/
@media (max-width: 768px) {
    .contact .container {
        padding: 0;
    }
}
/*#endregion CONTACT*/

/*#region FOOTER*/
@media (max-width: 768px) {
    .footer__inner {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2);
    }

    .footer__nav {
        flex-direction: column;
        gap: calc(var(--gap-unit)*5);
    }

    .footer__contact-icon {
        width: 1rem;
    }

    .footer__copy {
        font-size: .6rem;
    }

    .footer__social-link {
        width: 1.2rem;
    }
}

@media (max-width: 450px) {
    .footer__heading {
        font-size: 1.5rem;
    }

    .footer__list a,
    .footer__contact a {
        font-size: 1.4rem;
    }

    .footer__contact-icon {
        width: 1.8rem;
    }

    .footer__note,
    .footer__address {
        font-size: 1.3rem;
    }

    .footer__links a {
        font-size: 1.2rem;
    }

    .footer__links {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .footer__links-sep {
        display: none;
    }

    .footer__copy {
        font-size: 1.2rem;
    }

    .footer__social-link {
        width: 2rem;
    }
}
/*#endregion FOOTER*/