@charset "UTF-8";

@font-face {
    font-family: "NotoSansJP";
    src: url("Noto_Sans_JP/NotoSansJP-Regular.otf") format("otf");
}
*{
    font-family: 'NotoSansJP', sans-serif;
    font-weight: 400;
    line-height: 1.8em;
}
.h2, h2 {
    font-size: 9vw;
    font-weight: 600;
    letter-spacing: 8px;
}

.h4, h4{
    letter-spacing: 5px;
}
.h5, h5 {
    font-size: 4vw;
    font-weight: 500;
}
#mainNav{
    background: #121212;

}
#mainNav .navbar-brand {
    height: 50px;
    width: 50%;
}

#mainNav.navbar-shrink .navbar-brand{

}
#mainNav .navbar-toggler{
    color: #fff;
    background: transparent;
    border: 1px solid transparent;
    font-size: 25px;
}
.navbar-light .navbar-nav .nav-link{
    color: rgb(216 216 216);
}

/* header
 ***************/
.carousel-item {
    position: relative;
    height: 80vh;
    min-height: 500px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.carousel-item::before{
    /* 透過した黒を重ねる */
    background-color: rgba(159, 159, 159, 0.2);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}
.carousel-caption{
    top: 35%;
}



header h1{
    letter-spacing: 5px;
    font-weight:600;
    font-size: 6vw;
    line-height: 2em;
}

header h2{
    letter-spacing: 5px;
    font-weight:600;
    font-size: 15px;
}

.carousel-item video {
    position: absolute;
    bottom: -50%;
    right: -50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    background-size: cover;
    z-index: -1;
}

.btn-white{
    background: #121212;
    color:#fff;
    border-radius: 5px;
    border:1px solid #121212;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
}
.btn-white:hover{
    opacity: 0.7;
    color:#fff;
    cursor: pointer;
}
.btn-black{
    background: #fff;
    color:#121212;
    border-radius: 5px;
    border:1px solid #fff;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
}
.btn-black:hover{
    opacity: 0.7;
    color:#121212;
    cursor: pointer;
}
.text-black{
    color : #000;
}
#mainNav.navbar-shrink .nav-link.active {
    color: #64a19d;
    outline: 0;
    border-bottom: .25rem solid #64a19d;
}

.bg-black {
    background-color: #f1f1f1!important;
}
#company,
#vision,
#news,
#contact,
#service,
#member{
    padding: 60px 0;
}

/* VISION
 ***************/
#vision {
    padding-top: 5rem;
    background: #dfdfdf;
}

.vision-link{
    color: #121212 !important;
    font-weight: 600;

}
#vision p{
    font-size: 6.8vw;
    letter-spacing: 5px;
    font-weight: 500;
}

#vision p span.small{
    color: #888888;
    font-size: 70%;
}
/* SERVICE
 ***************/
.service-logo img{
    height: 40px;
    width: auto;
}

#service .project-text{
    padding: 2rem 0.5rem;
}
#service .project-text h5{
    font-weight: 600;
    font-size: 5vw;
}
#service .project-text p{
    font-size: 4vw;
}

/* NEWS
 ***************/
#news{
    background: #f1f1f1;
}
#news .news-line{
    padding: 50px 0;
    border-bottom: 1px solid #121212;
}
/* COMPANY
 ***************/


#company{
}
#company iframe{
    width: 100%;
    min-height: 500px;
    height: auto;
}

#company .info{
    border-top: 2px solid #121212;
}

/* contact
 ***************/
#contact textarea{
    height: 300px;
}

#contact .attenntion{
    color: red;
}
/* footer
 ***************/
footer a{
    color: #ccc;
}
footer a:hover{
    color: #9f9f9f;
}
@media (min-width: 992px){

    .h2, h2 {
        font-size: 2.5rem;
    }
    .h5, h5{
        font-size: 2rem;
    }
    header h1{
        letter-spacing: 10px;
        font-size: 4vw;
    }
    #mainNav .navbar-brand {
        height: 50px;
        width: 250px;
    }
    #mainNav,
    #mainNav.navbar-shrink{
        background-color: #121212;
        color:#fff;
    }
    #mainNav .nav-link,
    #mainNav.navbar-shrink .nav-link{
        color:#fff;
    }
    #mainNav .nav-link:hover{
        color: #64a19d;
    }
   #mainNav .navbar-brand {
        height: 50px;
        width: 250px;
       padding-top: 3px;
       color: #fff;
    }


    #service img.cover{
        object-fit: cover;
        height: 400px;
    }

    #service .featured-text {
        padding: 0 0 0 2rem;
        border-left: .5rem solid #004085;
    }


    #service .project-text{
        padding: 3rem 1.5rem;
    }
    #service .project-text h5{
        font-weight: 600;
        font-size: 2vw;
    }
    #service .project-text p{
        font-size: 1.2vw;
    }

    #company .info{
        border:none;
        border-left: 1px solid #121212;
    }


    .carousel-item video {
        bottom: 0;
        right: 0;
    }

    #vision p{
        font-size: 5vw;
    }
}