*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Noto Serif JP',serif;
}

/*--------------------------
HEADER
--------------------------*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:72px;

    background:#000;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    z-index:1000;

    box-shadow:0 2px 10px rgba(0,0,0,.35);

}

.logo{

    color:#fff;

    text-decoration:none;

    font-family:'Cinzel',serif;

    font-size:28px;

    font-weight:600;

    letter-spacing:2px;

}

.menu{

    display:flex;

    list-style:none;

    gap:32px;

}

.menu a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    transition:.25s;

}

.menu a:hover{

    color:#ddd;

}

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:32px;

    cursor:pointer;

}

/*--------------------------
HERO
--------------------------*/

.hero-container{

    position:relative;

    width:100%;

    height:100vh;

    background:url("bg.png") center center/cover;

    display:flex;

    justify-content:center;

    align-items:center;
}

.overlay{

    position:absolute;

    inset:0;

    /*    background:rgba(0,0,0,.45);*/
    background: #000;
}

.quote-content{

    position:relative;

    color:white;

    text-align:center;

    z-index:10;

    padding:20px;
}

.quote-text{

    font-size:34px;

    line-height:1.8;
}

.quote-author{

    display:block;

    margin-top:25px;

    text-align:right;

    font-style:normal;
}

.quote-link{

    margin-top:8px;

    text-align:right;

    color:white;
}

.quote-link a{

    color:white;
}

/*--------------------------
MOBILE
--------------------------*/

@media (max-width:768px){

.header{

    padding:0 20px;

}

.logo{

    font-size:22px;

}

.menu-toggle{

    display:block;

}

.menu{

    display:none;

    position:absolute;

    top:72px;

    right:0;

    width:220px;

    background:#000;

    flex-direction:column;

    gap:0;

    border-left:1px solid #333;

    border-bottom:1px solid #333;

}

.menu.show{

    display:flex;

}

.menu li{

    border-bottom:1px solid #333;

}

.menu li:last-child{

    border-bottom:none;

}

.menu a{

    display:block;

    padding:16px 20px;

    color:#fff;

}

}