*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    word-break: break-word;
    color: rgb(100, 100, 100);
    text-decoration: none;
}

@keyframes dissolve{
    from{
        opacity: 0;
        transform: translate(0,20px);
    }to{
        opacity: 1;
        transform: translate(0,0);
    }
}


@keyframes dissolve_2{
    0%{
        opacity: 0;
        transform: translate(0,20px);
    }
    40%{
        opacity: 0;
        transform: translate(0,20px);
    }
    100%{
        opacity: 1;
        transform: translate(0,0);
    }
}


.fv{
    height: 25vh;
    background-color: wheat;
    margin-top: 80px;
    animation-name: dissolve;
    animation-duration: 0.2s;
}

.fv > div {
    height: 25vh;
    padding-left: 5%;
    display: flex;
    align-items: center;
    margin-top: 80px;
    padding-left: 5%;
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(../img/service_fv.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fv > div > h1 {
    color: white;
    z-index: 2;
    font-size: 50px;
}

.subheader{
    margin: 60px auto 60px auto;
    text-align: center;
    line-height: 1.2;
    animation-name: dissolve_2;
    animation-duration: 0.3s;
}

.subheader > p {
    color: rgb(35, 131, 249);
    font-size: medium;
    font-weight: bold;
}

.business_content{
    width: 85%;
    margin: auto;
    margin-bottom: 8%;
    display: flex;
    justify-content: space-between;
}

.business_content:nth-child(1) {
    animation-name: dissolve_2;
    animation-duration: 0.3s;
}

.business_content:nth-child(odd){
    flex-direction: row-reverse;
}

.business_content:nth-child(1) .image{
    background-image: url(../img/office.jpg);
}

.business_content:nth-child(2) .image{
    background-image: url(../img/apartment.jpg);
}

.business_content:nth-child(3) .image{
    background-image: url(../img/kitchen.jpg);
}

.business_content:nth-child(4) .image{
    background-image: url(../img/old_house.jpg);
}

.image{
    width: 45%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4/3;
}

.txt_frame{
    width: 48%;
}

.txt_frame::first-letter{
    color: rgb(35, 131, 249);
    font-weight: bold;
    font-size: 30px;
}

.txt_frame div:nth-child(1) p {
    font-size: 2.6vw;
}

.txt_frame div:nth-of-type(2){
    width: 80%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: 0;
}

@media screen and (max-width: 744px) and (min-width: 429px){

.business_content{
    width: auto;
    margin-bottom: 80px;
    display: block;

}

.image{
    width: 428px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: auto;
    margin-bottom: 20px;
    aspect-ratio: 4/3;
}

.txt_frame{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

.txt_frame > div:nth-child(1) > p {
    font-size: 25px;
    display: inline-block;
    vertical-align: middle;
}

.txt_frame > div:nth-child(1) > p::first-letter{
    color: rgb(35, 131, 249);
    font-size: large;
    font-weight: bold;
}

.txt_frame div:nth-child(2) {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
}

}

@media screen and (max-width: 428px) {

.business_content{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
    display: block;
}

.image{
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}

.txt_frame{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

.txt_frame > div:nth-child(1) > p {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}

.txt_frame > div:nth-child(1) > p::first-letter{
    color: rgb(35, 131, 249);
    font-size: large;
    font-weight: bold;
}

.txt_frame div:nth-child(2) {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
}

}