.bg-blue{
    color: white;
}



.company-container{
    width:84.17vw;
    margin:0 auto;
}



#company-heading{
    text-align: center;
    margin-top:6.3vw;
}
#company-heading h3{
    font-size: 1.5vw;
}
#company-heading p{
    margin-top:4.06vw;
    font-size:1.1vw;
}


.company-content{
    margin:11.46vw auto 0 auto;
    width:70.42vw;
}
.company-content section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:9.17vw;
}
.company-section-img img{
    width:35.21vw;
    height:20.26vw;
    object-fit: cover;
}

.company-content section:nth-child(2){
    flex-direction:row-reverse;
}

.info-text{
    margin-right:5vw;
}
.info-text .text-title{
    font-size:1.5vw;
    font-weight: 600;
    margin-bottom:2.76vw;
}
.info-text p{
    font-size:1.1vw;
    width:27.29vw;
    line-height:2vw;
}


/*矢印付きボタン*/
.yazirusi-btn.company-btn{
    display: flex;
    justify-content: center;
    padding-bottom:12.5vw;
}


.yazirusi-btn a{
    color: white;
    display:inline-block;
    background-color: black;
    width:31.3vw;
    height:6.88vw;
    text-decoration: none;
    position: relative;
    font-size:1.3vw;
}
.yazirusi-btn p{
    margin-left:6.28vw;
}
.bg-btnicon{
    width:5vw;
    height:5vw;
    border: 1px solid white;
    border-radius: 50px;
    text-align: center;
    line-height:5.5vw;
    position: relative;
    transition: .5s;
}
.bg-btnicon.works-btnicon{
    bottom:85%;
    left:92%;
}
.bg-btnicon i{
    color: white;
    transform: rotate(-90deg);
    font-size:2vw;
    transition: .5s;
}

.yazirusi-btn.company-btn p{
    line-height: 6.8vw;
}

.yazirusi-btn a:hover .bg-btnicon{
    background-color: white;
    border: none;
}
.yazirusi-btn a:hover i{
    color: black;
}


.bg-gray{
    background-color: #E8E8E8;
    padding-top:10vw;
}





/*社長挨拶*/
.message{
    position: relative;
}
.message-info{
    position: absolute;
    z-index: 5;
    top:3vw;
    left:15%;
}
.message-info h4{
    font-size: 1.5vw;
}
.message-info p{
    font-size: 1.1vw;
}

.message-info .message-text{
    font-size:1.3vw;
    font-weight: 600;
    margin:4.69vw 0;
}


.viewmore-btn a{
    color: white;
    text-decoration: none;
    display: inline-block;
    background-color: black;
    padding:1.46vw 5.16vw;
}

.president-img::before{
    content:"";
    display: block;
    width:70%;
    height:28.33vw;
    background-color:#E8E8E8;
    transform: skewX(-32deg);
    position: absolute;
    top:0;
    left:-18%;
    z-index: 2;
}
.president-img img{
    width:58.13vw;
    height:28.33vw;
    object-fit: cover;
    position: absolute;
    top:0;
    right:0;
    z-index:1;
}





/*スタッフ*/
#staff{
    margin-top:40vw;
}


/*------------sectionタイトル------------*/
.section-title{
    text-align: center;
}
.section-title h4{
    font-size:1.5vw;
    font-weight: 600;
}
.section-title p{
    margin-top:.5vw;
    font-size: 1.1vw;
}
/*---------------------------------------*/



/*スライド*/

.staff-slide{
    width:95%;
    margin:0 auto;
    position: relative;
}
.swiper{
    width:100%;
}
.swiper-slide{
    width: 30vw !important;
    margin:0 1.5vw;
}
.swiper-slide:nth-child(1){
    margin-left:0;
}

.swiper-pagination{
    top: 110% !important;
}



.swiper-button-prev,
.swiper-button-next{
    width:5vw !important;
    height:5vw !important;
    background-color:rgba(0,0,0,.3);
    border-radius: 50px;
}
.swiper-button-prev::after,
.swiper-button-next::after{
    color: white !important;
    font-size: 1.5vw !important;
    font-weight: bold;
}



.staff-image{
    width:30vw;
    position: relative;
}
.staffimg-bg{
    width:30vw;
    height:20vw;
    margin-top:10vw;
    background-color: white;
}
.staff-img{
    display: inline-block;
    height: 25vw;
    margin: 0 auto;
    position: relative;
    top: -25%;
    left: 50%;
    transform: translate(-50%);
}
.staff-img img{
    height:100%;
}

.staff-info{
    margin-top:1.88vw;
    font-size:1.1vw;
}
.staff-info .staff-name{
    font-size: 1.5vw;
    font-weight: 600;
    margin-top:1vw;
}





/*交通アクセス*/
#access{
    margin-top:15vw;
    padding-bottom:10vw;
}

.access-content{
    margin:5vw auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:70.42vw;
    flex-wrap: wrap;
    font-size: 1.1w;
}

.company-img{
    width:31.98vw;
    height:37.92vw;
    background-color: black;
    position: relative;
}
.company-img img{
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    top:0;
    left:0;
    opacity: .8;
}


.access-info h4{
    font-size:1.3vw;
    margin-bottom:2vw;
}

.tel{
    display: flex;
    align-items: center;
}
.tel i{
    font-size:1.5vw;
    margin-left:1.5vw;
    margin-right:.5vw;
}
.tel a{
    color: black;
    font-size:1.5vw;
}

.date{
    margin:2.5vw 0; 
}

.map iframe{
    width:33.75vw;
    height:13.44vw;
    margin-top:1vw;
}


.transportation-method{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:2vw;
}
.transportation-method p{
    line-height:2.5vw;
    width:32.5vw;
}






/*-----------------------------------------------------------------------------
レスポンシブ
-------------------------------------------------------------------------------*/

@media(max-width:599px){

    /*-------------------------------------------------------------------------
    メイン
    ---------------------------------------------------------------------------*/



    .company-container{
        width:90%;
    }





    /*zettonについて*/
    #company-heading{
        margin-top:13.33vw;
    }
    #company-heading h3{
        font-size: 5vw;
    }
    #company-heading p{
        font-size:3.5vw;
    }
    
    
    .company-content{
        width:90%;
    }
    .company-content section{
        display: flex;
        flex-flow: column;
        align-items: center;
        margin-bottom:9.17vw;
    }
    .company-content section img{
        width:100%;
        height:52.05vw;
    }
    
    .company-content section:nth-child(2){
        flex-direction:row;
        flex-flow: column;
    }
    
    .info-text{
        margin-right:0;
        margin-top:3vw;
    }
    .info-text .text-title{
        font-size:4vw;
        font-weight: 600;
        margin-bottom:2.76vw;
    }
    .info-text p{
        font-size:3.5vw;
        width:100%;
        line-height:6vw;
    }
    
    
    /*矢印付きボタン*/
    .yazirusi-btn.company-btn{
        padding-bottom:12.5vw;
    }
    
    
    .yazirusi-btn a{
        width:69.23vw;
        height:15.13vw;
        font-size:3.5vw;
    }
    .yazirusi-btn p{
        margin-left:10vw;
    }
    .bg-btnicon{
        width:10vw;
        height:10vw;
        line-height:10vw;
    }
    .bg-btnicon.works-btnicon{
        bottom:85%;
        left:92%;
    }
    .bg-btnicon i{
        font-size:3.5vw;
    }
    
    .yazirusi-btn.company-btn p{
        line-height: 15.13vw;
    }
    



    /*社長挨拶*/

    .message-info{
        width:100%;
        top:45vw;
        left:50%;
        transform: translate(-50%);
        text-align: center;
    }
    .message-info h4{
        font-size: 4vw;
    }
    .message-info p{
        font-size: 3.5vw;
    }

    .message-info .message-text{
        font-size:3.5vw;
    }


    .viewmore-btn a{
        padding:6.15vw 25.64vw;
    }

    .president-img::before{
        width:0;
        height:0;
    }
    .president-img img{
        width:90%;
        height:40.26vw;
        right:50%;
        transform: translate(50%);
    }





    /*スタッフ*/
    #staff{
        margin-top:120vw;
    }


    /*------------sctionタイトル------------*/
    .section-title h4{
        font-size:4vw;
    }
    .section-title p{
        font-size: 3.5vw;
    }
    /*---------------------------------------*/



    /*スライド*/
    .staff-slide{
        width:90%;
    }

    .swiper-slide{
        width:100% !important;
        margin:0;
    }
    .swiper-slide:nth-child(1){
        margin-left:0;
    }
    
    .swiper-pagination{
        top: 105% !important;
    }
    
    
    
    .swiper-button-prev,
    .swiper-button-next{
        width:10vw !important;
        height:10vw !important;
    }
    .swiper-button-prev{
        left: 0% !important;
    }
    .swiper-button-next{
        right: 0% !important;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after{
        font-size: 3.5vw !important;
    }


    .staff-slide{
        margin-top:10vw;
    }

    .staff-image{
        width:90%;
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }
    .staffimg-bg{
        width:100%;
        height:50vw;
        margin-top:14vw;
    }
    .staff-img{
        height: 65vw;
        top: -15vw;
    }
    .staff-img img{
        height:100%;
        object-fit: cover;
    }

    .staff-info{
        margin-top:1.88vw;
        margin-left:4.5vw;
        font-size:3.5vw;
    }
    .staff-info .staff-name{
        font-size: 4vw;
    }





    /*交通アクセス*/

    #access{
        margin-top:25vw;
    }
    .access-content{
        margin:5vw auto 0 auto;
        flex-flow: column;
        justify-content: center;
        width:90%;
        font-size: 3.5vw;
    }

    .company-img{
        width:100%;
        height:56.15vw;
    }

    .access-info h4{
        font-size:4vw;
        text-align: center;
        margin-top:5vw;
        margin-bottom:3vw;
    }


    .access-info{
        width:100%;
    }

    .tel{
        margin-top:4vw;
    }
    .tel i{
        font-size:5vw;
        margin-left:10vw;
        margin-right:3vw;
    }
    .tel a{
        font-size:5vw;
    }

    .date{
        margin:10vw 0; 
    }

    .map iframe{
        width:100%;
        height:63.59vw;
        margin-top:4vw;
    }


    .transportation-method{
        display: flex;
        flex-flow: column;
    }
    .transportation-method p{
        line-height:6.5vw;
        width:100%;
        margin-top:5vw;
    }


}