#greeting {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#greeting {
    height: 60vh;
    max-width: 1920px; 
    max-height: 1080px;
    margin: 0 auto;
}
}


#greeting::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/greeting/office-desk.webp) ;
}

#greeting::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #greeting::before {
        position: absolute;
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
        content: "";
        opacity: 1;
        margin: 0 auto;
        background-size: cover;
        z-index: 1;
        max-height: 940px;
        background-position: center;
        background-image: url(../img/greeting/office-desk.webp) ;
    }
    #greeting::after {
        position: absolute;
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
        content: "";
        background-color: #464646;
        background-size: cover;
        opacity: 0.5;
        z-index: 2;
    }
}

.top-text {
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

@media screen and (min-width: 1024px){
.top-text {
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
}

.top-text-visa {
    top: 56%;
    left: 45%;
    transform: translate(-40%, -50%);
    -webkit-transform: translate(-40%, -45%);
    -ms-transform: translate(-40%, -50%);
}

@media screen and (min-width: 640px){
.top-text-visa {
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
}

@media screen and (min-width: 1024px){
    .top-text-visa {
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    }
    

/* .top-text-greeting {
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
} */
/* 
@media screen and (min-width: 380px){
    .top-text {
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
}

@media screen and (min-width: 1024px){
.top-text {
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.top-text-greeting {
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

} */

.greeting-img {
    background-image: url(../img/greeting/representative01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 500px;
}

.greeting-img02 {
    background-image: url(../img/greeting/representative02.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 500px;
}

.b-main-color {
    border-color: rgb(0,159,232);
}

.b-sub-color {
    border-color: rgb(0,159,232,0.3);
}

.top-index span::before {
    content: "";
    background-color: #fffaa3;
    background-repeat: no-repeat;
    display: inline-block;
    width: 10px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 1.3%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 20px;
}

.greeting-text span::before {
    content: "";
    background-color: #009FE8;
    background-repeat: no-repeat;
    display: inline-block;
    width: 10px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 1.3%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 20px;
}

.greeting-text-second::before {
    content: "";
    background-color: #009FE8;
    background-repeat: no-repeat;
    display: inline-block;
    width: 15px;
    height: 3px;
    position: absolute;
    top: 25%;
    left: -3.2%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 20px;
}

/* visa */


#visa::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/visa/meeting.webp) ;
}

#visa::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #visa::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/visa/meeting.webp) ;
    }
    #visa::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#visa {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#visa {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

.service-button {
    transition: all .3s ease-in-out;
}

.service-button:hover {
    background-color: #009FE8;
    color: #fff;
    transition: all .3s ease-in-out;
}

.service-button:hover::before {
    border-bottom: 14px solid #fff;
    transition: all .3s ease-in-out;
}

.service-button::before {
    content: "";
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border-bottom: 14px solid #009FE8;
    border-left: 14px solid transparent;
    transition: all .3s ease-in-out;
}

.visa-img {
    background-image: url(../img/visa/status-of-residence.jpg);
    background-size: cover;
}

/* founding */

#founding::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/founding/manage.webp) ;
}

#founding::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #founding::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/founding/manage.webp) ;
    }
    #founding::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#founding {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#founding {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

.text-link {
    color: #F50C52;
    transition: all 300ms ease-in-out;
}

.text-link:hover {
    opacity: 0.7;
    transition: all 300ms ease-in-out;
}

/* submit */

#submit::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/submit/document.webp) ;
}

#submit::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #submit::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/submit/document.webp) ;
    }
    #submit::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#submit {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#submit {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

/* office */

#office::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/office/funabashi-river.webp) ;
}

#office::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #office::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/office/funabashi-river.webp) ;
    }
    #office::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#office {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#office {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

/* contact */

#contact::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/contact/phone.webp) ;
}

#contact::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #contact::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/contact/phone.webp) ;
    }
    #contact::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#contact {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#contact {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

.submit {
    transition: all 500ms ease;
}

.submit:hover {
    color: #fff;
    background-color: #009FE8;
    transition: all 500ms ease;
}

/* confidentiality */

#confidentiality::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/confidentiality/security.webp) ;
}

#confidentiality::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #confidentiality::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/confidentiality/security.webp) ;
    }
    #confidentiality::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#confidentiality {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#confidentiality {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

/* privacy */

#privacy::before {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    opacity: 1;
    margin: 0 auto;
    background-color: #dcdcdc;
    background-size: cover;
    z-index: 1;
    max-height: 940px;
    background-position: center;
    background-image: url(../img/privacy/privacy.webp) ;
}

#privacy::after {
    position: absolute;
    height: 293px;
    width: 100%;
    top: 70px;
    left: 0;
    content: "";
    background-color: #464646;
    background-size: cover;
    opacity: 0.5;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    #privacy::before {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        left: 70px;
        background-position: center;
        background-image: url(../img/privacy/privacy.webp) ;
    }
    #privacy::after {
        height: calc(60vh - 140px);
        width: calc(100% - 140px);
        top: 70px;
        left: 70px;
    }
}

#privacy {
    height: 365px;
}

@media screen and (min-width: 1024px) {
#privacy {
    height: 60vh;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}
}

/* consult */