@charset "utf-8";
/* CSS Document */

body{
 background-color:#2A2A2A;
    color: #FFFFFF;
    font-family: sans-serif;
}
p {
    font-size: 20px
}
a{
    color: #0064FF;
}
h2{
    font-size: 4rem;
    font-weight: 700;
}
h3{
    font-size: 2.5rem;
    font-weight: 600;
}

/*###### Header ######*/
.header{
    background-image: url("../img/header-img.JPG");
    background-color:rgba(0,0,0,0.45);
    background-blend-mode:darken;
    height: 850px;
    background-repeat:round;
}

.header-brand{
    color: #FFF;
    height: 100%;
}
.header-brand div{
    position: absolute;
    width: 90%;
    margin-left: -45%;
    left: 50%;
    top: 50%;
    text-align: center;
    margin-top: -1rem;
}
.header-brand h1{
    font-size: 5rem;
    font-weight: 700;
}

@media(max-width: 991px){
    .header{
        height: 500px;
    }
    .header-brand h1{
        font-size: 3rem;
    }
}



/*###### Navbar ######*/
.navbar-top{
    position: absolute;
    width: 100%;
    z-index: 1;
    
    
}
.navbar-top a{
    font-weight: bold;
    font-size: 1.5rem;
    color: #FFFFFF
}

.nav-button-top > button{
    position: relative;
    display: block;
    float: right;
}
/* ハンバーガーの枠線の色 */
.navbar-toggler{
  border-color: #ffffff;
}
/* ハンバーガーの棒の色 */
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.logo{
    background-color: rgba(255,255,255,0.75);
    max-width: 5%;
}

/*###### About ######*/

/*###### Footer ######*/
footer{
    background-color: rgba(0,0,0,1.00);
}