@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: rgb(53, 48, 49);
    background-image: url(../images/backimage.png);
    background-repeat: repeat-y;
    background-size: 100%;
    
}
/* ナビ */
header{
    display: flex;
    

}

header h1{
    width: 5vw;
    height: 4vw;
    margin-top: 4vw;
    margin-left: 1vw;
}

header nav{
    width: 50vw;
    margin-left: 27vw;
    margin-top: 3vw;
    margin-bottom: 8vw;

}

header nav ul{
    display: flex;
    width: 50vw;
    height: 3vw;
    list-style-type: none;
    

}

.list{
    width: 100%;
    padding: 1vw;

}

.list a{
    display: block;
    text-decoration: none;
    text-align: center;
    color: #fff;


}
/* ポジションフィックスcontact */
.contact{
    position: fixed;
    width: 10vw;
    height: 3vw;
    margin-left: 54vw;
    padding-top: 1vw;
    border-radius: 10%;
    background-color: rgb(203, 15, 28);
    
}

.contact a{
    display: block;
    text-decoration: none;
    text-align: center;
    color: #fff;
}


/* TOPメインアニメーション*/
.parts01 img{
    display: block;
    width: 65vw;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    animation: 6s ease-in-out infinite;
}

.parts02 img{
    display: block;
    height: 20vw;
    position: absolute;
    top: 38vw;
    left: 8vw;
    animation: margin-anime 1.5s ease-in-out infinite;


}

.parts03{
    height: 4vw;
    position: absolute;
    top:9vw;
    left:23vw;
    animation: margin-anime 3s ease-in-out infinite;
    
}

.parts04{
    height: 4vw;
    position: absolute;
    top:8vw;
    left:75vw;
    animation: margin-anime 3s ease-in-out infinite;
    
}

@keyframes margin-anime{
    0%{
       
    
    }
    50%{
        margin-top: 0.5vw;
    }   
        

    100%{
        margin-top: 1vw;
    }
}

/* Our Purpuseメイン画像にpositionアブソリュート */
.small-text{
    position: absolute;
    top: 45vw;
    left: 55vw;
    font-size: 28px;
    color: rgb(203, 15, 28);

}

.h2-text{
    position: absolute;
    top: 50vw;
    left: 55vw;
    font-size: 35px;
    color: #fff;
    white-space: pre-wrap;
}

.main-textanimation p:nth-of-type(1){
    display: block;
    position: absolute;
    top: 65vw;
    left: 55vw;
    font-size: 20px;
    color: #fff;
    white-space: pre-wrap;

}

.main-textanimation p:nth-of-type(2){
    display: block;
    position: absolute;
    top: 72vw;
    left: 55vw;
    font-size: 20px;
    color: #fff;
    white-space: pre-wrap;

}

/* section1 サービス */
.section-wrap1{
    margin-top: 25vw;
}

.section-wrap1 h2{
    
   
    font-size: 70px;
    color:rgb(203, 15, 28) ;

}

.section-wrap1 small{
    margin-left: 5vw;
    color: #fff;
}

.section1-flex{
    display: flex;
    width: 80vw;
    margin-top: 2vw;
    margin-right: auto;
    margin-left: auto;
}

.child1{
    position: relative;
    top: 3vw;
    left: 4vw;

}



.child1 h3{
    font-size: 90px;
    color:rgb(203, 15, 28) ;

}

.child1 p{
    height: 18vh;
    color:rgb(203, 15, 28) ;
    writing-mode:tb-rl;

}

.child2{

    width: 100%;
    height: 40vw;
    margin-top: 8vw;
    border-radius: 5%;
    background-color: #fff;
}

.child2 h4{
    width: 15vw;
    margin: 4vw auto 0; 
    border-bottom: 1px solid rgb(203, 15, 28) ;

}

.child2 img{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 18vw;
    height: 19vw;

}

.child2 p{
    display: block;
    width: 25vw;
    margin-right: auto;
    margin-left: auto;
    color:  rgb(53, 48, 49);
    
}

.child2 span{
    display: block;
    height: 4vw;
    margin-top: 2vw;
    border-radius: 7%;
    text-align: center;
    background-color:rgb(238, 20, 34)  ;
}



.child2 span a{
    display: block;
    padding: 1vw 0;
    text-decoration: none;
    color: #fff;
}

/* service一覧 */
.section-wrap2{
    margin-right: auto;
    margin-left: auto;

}

.sarvice-flex1{
    display: flex;
    width: 80vw;
    
}

.sarvice-flex1 img{
    display: block;
    width: 100%;
    height: 7vw;
    
}

.sarvice-flex1 a{
    display: block;
    width: 100%;
    text-decoration: none;
    white-space: pre-wrap;
    color: #fff;
}

.sarvice-flex2{
    display: flex;
    width: 80vw;
}

.sarvice-flex2 img{
    display: block;
    width: 100%;
    height: 7vw;
    
}

.sarvice-flex2 a{
    display: block;
    width: 100%;
    text-decoration: none;
    white-space: pre-wrap;
    color: #fff;
}