body {
    counter-reset: my-sec-counter;
}

#breadcrumb {
    height: 40vh;
    position: relative;
    z-index: 5;
    padding: 45px 55px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#breadcrumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2;
    opacity: 0.35;
}
#breadcrumb .breadcrumb-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url('/public/frontend/images/files/breadcrumb.png');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#breadcrumb .breadcrumb-detail {
    position: relative;
    z-index: 5;
}

#breadcrumb .bread-title {
    font-size: 62px;
    font-weight: 900;
    color: #fff;
}

#breadcrumb .link-section {
    position: absolute;
    bottom: -72px;
}

#breadcrumb .bread-link {
    background-color: #bf1e2e;
    padding: 10px 40px;
    color: #fff;
    border-radius: 20px;
}
#breadcrumb .bread-link a {
    color: #fff;
}

#breadcrumb .padding-span {
    padding: 0 10px;
}

.who-we .about-content {
    font-size: 36px;
}

.display-1.mission-title {
    font-size: 44px;
    font-weight: 600;
}

.display-1.mission-title span::after {
    width: 100%;
}

.display-1.mission-title span::before {
    left: 33%;
}
.display-1.reason-title {
    font-size: 44px;
    font-weight: 600;
    margin-bottom: 75px;
}

.display-1.reason-title span::after {
    width: 100%;
}

.display-1.reason-title span::before {
    left: 40%;
}

.company-section {
    /* padding-top: 55px; */
    background-color: #fbf8f2;
}
.study-section {
    padding: 55px 0;
    padding-top: 75px;
    background-color: #fbf8f2;
}

.mission-list, .mission-list-2 {
    list-style-type: none;
    padding-right: 80px;
    position: relative;
    counter-reset: my-sec-counter-2;

}
.mission-list-3 {
    list-style-type: none;
    padding-right: 80px;
    position: relative;
    counter-reset: my-sec-counter-3;

}
.reason-list {
    list-style-type: none;
    padding-right: 80px;
    position: relative;
    counter-reset: reason-counter;

}

.mission-list::before, .mission-list-3::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 75%;
    top: 10px;
    left: 22px;
    background-color: #bf1e2e;
}
.mission-list-2::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 60%;
    top: 10px;
    left: 22px;
    background-color: #bf1e2e;
}
.reason-list::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 85%;
    top: 10px;
    left: 76px;
    background-color: #bf1e2e;
}

.mission-list li, .mission-list-2 li, .mission-list-3 li {
    padding-bottom: 45px;
    position: relative;
    padding-left: 65px;

}
.reason-list li {
    padding-bottom: 45px;
    position: relative;
    padding-left: 145px;

}

.mission-list li::before {
    counter-increment: my-sec-counter 1;
    content: counter(my-sec-counter);
    position: absolute;
    width: 45px;
    height: 45px;
    top: 10px;
    left: 0;
    background-color: #bf1e2e;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    z-index: 2;
}

.jlpt-inner-list li::before, .jlpt-inner-list li::after {
    display: none;
}

.jlpt-inner-list li {
    padding-left: 10px;
    padding-bottom: 15px;
}

.mission-list.jlpt-list li::before {
    counter-increment: my-sec-counter 1;
    content: "N" counter(my-sec-counter);
    position: absolute;
    width: 45px;
    height: 45px;
    top: 10px;
    left: 0;
    background-color: #bf1e2e;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    z-index: 2;
}
 .mission-list-3 li::before {
    counter-increment: my-sec-counter-3 1;
    content: counter(my-sec-counter-3);
    position: absolute;
    width: 45px;
    height: 45px;
    top: 10px;
    left: 0;
    background-color: #bf1e2e;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    z-index: 2;
}
.mission-list-2 li::before {
    counter-increment: my-sec-counter-2 1;
    content: counter(my-sec-counter-2);
    position: absolute;
    width: 45px;
    height: 45px;
    top: 10px;
    left: 0;
    background-color: #bf1e2e;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    z-index: 2;
}
.reason-list li::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    top: 10px;
    left: 43px;
    background-color: #bf1e2e;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    z-index: 2;
}

.reason-list li .number {
    position: relative;
}

.reason-list li .number::before {
    counter-increment: reason-counter 1;
    content: counter(reason-counter);
}

.mission-list li::after, .mission-list-2 li::after, .mission-list-3 li::after {
    content: '';
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 100%;
    top: 0px;
    left: -10px;
    background-color: #bf1e2e31;
    z-index: 0;
}

.reason-list li::after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    top: 0px;
    left: 33px;
    background-color: #bf1e2e31;
    z-index: 0;
}

.big-info {
    position: relative;
    padding: 85px 0;
    text-align: center;
}

.big-info::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #bf1e2e;
    z-index: 2;
    opacity: 0.65;
}

.big-info .big-info-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('../images/files/about-sec-1.png');
    background-size: cover;
    background-position: center;
}



.big-info-desc  {
    position: relative;
    color: #fff;
    z-index: 5;
    font-size: 22px;
}
.big-info-desc p {
    position: relative;
    color: #fff;
    z-index: 5;
    font-size: 22px;
    width: 75%;
    margin: 0 auto;
    line-height: 1.4 !important;
}

.big-info .display-1 {
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.counter-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    text-align: center;
}

.counter-icon {
    text-align: center;
}

.counter-icon img {
    width: 65px;
    text-align: center;
}

.counter-number {
    font-size: 42px;
    font-weight: 700;
}

.city-icon img {
    width: 85px;
}

/* .objective-detail {
    padding-top: 45px !important;
} */

.service-section {
    padding-top: 95px;
}

.service-section .portfolio-desc h3 {
    font-size: 1.3rem;
    line-height: 1.2;
}

.service-section .portfolio-item {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-bottom: 45px;
}

.service-section .portfolio-desc {
    padding: 0 20px;
    padding-bottom: 25px;
}

.service-section .portfolio-desc span {
    font-size: 14px;
    margin-bottom: 10px;
}

.w-80 {
    width: 90%;
}

.reason-title {
    margin-bottom: 10px;
}

.reason-desc {
    width: 90%;
}

.reason-icon {
    position: absolute;
    left: 58.5px;
    top: 28px;
    z-index: 9;
}

.reason-icon img {
    width: 40px;
    filter: invert(1) brightness(1);
}

.college-section {
    padding: 75px 0;
    padding-bottom: 95px;
}

.college-title .display-1 {
    font-size: 2.8rem;
    margin-bottom: 55px;
    font-weight: 500;
}

.reason-section {
    background-color: #fbf8f2;
    padding: 75px 0;
}

.reason-section .display-1 {
    font-size: 2.1rem;
    margin-bottom: 55px;
    font-weight: 500;
}

.college-desc p {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 35px;
}

.college-header {
    margin-bottom: 45px;
}

.through-gfw {
    padding: 35px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-bottom: 45px;
}

.through-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 7px;
}

.thourgh-icon {
    background-color: #bf1e2e;
    width: 80px;
    height: 80px;
    line-height: 60px;
    text-align: center;
    margin-bottom: 15px;
    padding-top: 15px;
    border-radius: 50%;
    position: relative;
}

/* .thourgh-icon::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    background-color: #bf1e2e;
    opacity: 0.45;
    border-radius: 50%;
    top: -10px;
    left: -10px;
} */

.thourgh-icon img {
    width: 60px;
    filter: invert(1) brightness(1);
}

.accomodation-section {
    margin-bottom: 25px;
}

.student-title {
    font-size: 28px;
    margin-bottom: 10px;
}

.accomodation-section p {
    margin-bottom: 10px;
}

.scholar-title {
    font-size: 28px;
    margin-bottom: 20px;
}

.assist-service ul, .accomodation-section ul {
    padding-left: 45px;
    margin-bottom: 30px;
}

.assist-service ul li, .accomodation-section ul li {
    margin-bottom: 12px;
}

.get-touch {
    padding: 40px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-right: 20px;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
    border-right: 3px solid #eaeaea;
}

.touch-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.contact-detail {
    margin-bottom: 40px;
}

.contact-location, .contact-contact, .contact-email {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    font-size: 18px;
}

.contact-email {
    margin-bottom: 65px;
}

.social-icons {
    list-style-type: none;
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 0;
}

.social-icons li {
    font-size: 18px;
    border: 1px solid #bf1e2e;
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;

}

.fluid-width-video-wrapper {
    padding: 220px !important;
}

.contact-form button {
    margin-top: 20px;
    padding: 15px 20px;
}

.callback-section {
    padding: 85px 0;
    background-color: #fff;
}

.callback-section .display-1 {
    font-size: 42px;
    margin-bottom: 50px;
}

.topj-section {
    background-color: #fbf8f2;
}

.topj-section .topj-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 15px;
    /* text-align: center; */
}

.topj-section p {
    font-size: 18px;
}

.topj-desc {
    margin-bottom: 15px;
}

.mission-list.advantage-list {
    position: relative;
}
.mission-list.advantage-list::before {
    display: none;
}

.topj-section .display-1.small-text {
    font-size: 24px;
    margin-bottom: 10px;
}
.topj-section p {
    margin-bottom: 10px;
}
.topj-section ul {
    font-size: 16px;
    padding-left: 40px;
}

.jlpt-inner-list {
    padding-left: 20px !important;
}

.jlpt-list {
    padding-right: 15px;
}

.jlpt-list-title {
    font-size: 18px;
    font-weight: 700;
}

.terms-content p {
    margin-bottom: 15px;
}

.terms-content h3 {
    margin-top: 15px;
    margin-bottom: 7px;
}

.terms-content ul {
    padding-left: 20px;
}

.entry {
    padding: 0;
}

.event-section .entry-image img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* INPUT CSS */
.textInputWrapper {
    position: relative;
    width: 100%;
    margin: 12px 5px;
    --accent-color: #bf1e2e;
  }

  .textInputWrapper:before {
    transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  }

  .textInputWrapper:before,
  .textInputWrapper:after {
    content: "";
    left: 0;
    right: 0;
    position: absolute;
    pointer-events: none;
    bottom: -1px;
    z-index: 4;
    width: 100%;
  }

  .textInputWrapper:focus-within:before {
    border-bottom: 1px solid var(--accent-color);
  }

  .textInputWrapper:before {
    transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  }

  .textInputWrapper:focus-within:before {
    border-bottom: 1px solid var(--accent-color);
    transform: scaleX(1);
  }

  .textInputWrapper:focus-within:after {
    border-bottom: 2px solid var(--accent-color);
    transform: scaleX(1);
  }

  .textInputWrapper:after {
    content: "";
    transform: scaleX(0);
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    will-change: transform;
    border-bottom: 2px solid var(--accent-color);
    border-bottom-color: var(--accent-color);
  }

  .textInput::placeholder {
    transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    opacity: 1;
    user-select: none;
    color: #000;
  }

  .textInputWrapper .textInput {
    border-radius: 0px;
    /* box-shadow: 0px 2px 5px rgb(35 35 35 / 30%); */
    min-height: 55px;
    background-color: #fff;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 200ms;
    transition-property: background-color;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 12px;
    width: 100%;
    border: none;
  }

  .textInputWrapper .textInput:focus,
  .textInputWrapper .textInput:active {
    outline: none;
  }

  .textInputWrapper:focus-within .textInput,
  .textInputWrapper .textInput:focus,
  .textInputWrapper .textInput:active {
    background-color: #fff;
  }

  .textInputWrapper:focus-within .textInput::placeholder {
    opacity: 0;
  }

  .textInputWrapper textarea.textInput {
    min-height: 150px;
  }

  .footer.section {
    padding-bottom: 15px;
  }


  .hero-img-service {
    height: 100%;
  }

  .hero-img-service img {
    width: 100%;
    height: 100%;
  }

  .service-single-desc {
    padding-left: 75px;
    padding-right: 90px;
  }

  @media only screen and (max-width: 1200px) {
    .mission-desc-section {
        padding-left: 45px;
    }
    .footer-contact-info .footer-address {
        width: 95%;
    }

    .service-single-desc {
        padding-left: 55px;
        padding-right: 50px;
      }
  }

  @media only screen and (max-width: 991.98px) {
    .mission-desc-section {
        padding-left: 35px;
        padding-top: 45px;
    }

    .company-section .hero-img {
        max-width: 100%;
    }
    .footer-contact-info .footer-address {
        width: 60%;
    }

    .display-1.reason-title {
        font-size: 38px;
    }

    .study-japan .reason-list {
        padding-right: 20px;
    }

    .study-japan .reason-desc {
        text-align: justify;
    }
    .entry, .event-image  {
        margin-bottom: 30px;
    }

    #breadcrumb .bread-title {
        font-size: 52px;
    }






  }

  @media only screen and (max-width: 600px) {
    .mission-desc-section {
        padding-left: 20px;
    }
    .mission-list, .mission-list-2, .mission-list-3 {
        padding-right: 25px;
    }

    .big-info-desc p {
        width: 95%;
        font-size: 16px;
    }

    .counter-flex {
        padding: 45px 0;
    }
    .counter-number {
        font-size: 36px;
    }
    #breadcrumb .bread-title {
        font-size: 38px;
        line-height: 1.1;
    }
    #breadcrumb {
        height: 30vh;
        padding: 45px 30px;
        padding-bottom: 37px;
    }
    #breadcrumb .link-section {
        bottom: -56px;
    }
    .who-we .about-content {
        font-size: 30px;
    }
    .bg-image-about {
        padding-top: 65px;
    }
    .display-1.mission-title span::before {
        left: 50%;
    }
    .hero-img-service {
        margin-bottom: 0;
    }
    .footer-contact-info .footer-address {
        width: 85%;
    }

    .w-80 {
        width: 100%;
    }

    .accomodation-section ul {
        padding-left: 25px;
    }

    #breadcrumb .bread-link {
        padding: 10px 20px;
    }
    .mission-list-3::before {

        height: 70%;
    }

    .study-section .reason-list {
        padding-right: 20px;
    }

    .study-japan .reason-list::before {
        left: 49px;
    }

    .study-japan .reason-list li::before {
        left: 15px;
    }
    .study-japan .reason-list li::after {
        left: 4px;
    }
    .study-japan .reason-icon {
        left: 29.5px;
    }
    .study-japan .reason-list li {
        padding-left: 110px;
    }

    .study-japan .reason-title {
        text-align: left;
        font-size: 24px;
    }

    .study-japan .reason-desc {
        width: 100%;
    }

    .college-title .display-1 {
        font-size: 1.8rem;
    }

    .mission-list.advantage-list {
        margin-top: 25px;
    }
    .topj-section ul {
        padding-left: 20px;
    }
    .callback-section .display-1 {
        font-size: 32px;
    }
    .fluid-width-video-wrapper {
        padding: 220px 100px !important;
    }
    .get-touch {
        margin-right: 0;
        padding-left: 15px;
    }
    .thourgh-icon {
        margin: 0 auto;
        margin-bottom: 15px;
    }
    .through-title, .through-detail {
        text-align: center;
    }


    .entry-detail {
        border-radius: 0;
    }

    .display-1.mission-title {
        font-size: 32px;
    }

    .service-single-desc {
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 45px;
      }

  }