@charset "utf-8";
/* CSS Document */
/* ----------------------------------------
ハンバーガーとは関係ないBASEの部分です
-------------------------------------------*/
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}

.header-logo {
    color: #333;
    position: fixed;
    top: 20px;
    left: 4vw;
    background-color: #fff;
    padding: 0 16px;
    z-index: 1;
    border-radius: 5px;
    border: 0.5px solid;
}
.fv{
background-color: gray;
height: 100vh;
}
/* ------------------------------
バーガー中身
---------------------------------*/
.header-nav{
list-style: none;
position: fixed;
top: 0;
right: 0;
width: 36.1vw;
height: 100vh;
background-color: rgba(34, 34, 34, 95);
z-index: 2;
text-align: center;
padding: 120px 0 0;
color: #fff;
/*　透明にして表示を消しています　 */
opacity: 0;
/*pointer-events: none;/*ここ*/
/*　X（右）方向に100％ずらして画面外に移動させています。　*/
transform: translateX(100%);
/* 　スライドで出てくる秒数と表示される秒数を指定　*/
transition: transform .3s, opacity .3s;
}
.nav-item{
margin-bottom: 30px;
}
.nav-item:first-of-type{
margin-bottom: 40px;
}
.nav-item:last-of-type{
margin-bottom: 0;
}
.header-nav a{
color: #fff;
}
/* ------------------------------
BURGER
---------------------------------*/
button.burger-btn {
    display: flex;
    align-items: center;
    position: fixed;
    height: 41.62px;
    top: 20px;
    right: 4vw;
    z-index: 3;
    background-color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    border: 0.5px solid;
}
/* 　ここでハンバーガーメニューの大きさや色を変更　*/
.bar{
display: block;
background-color: #333;
height: 2px;
width: 22px;
border-radius: 1px;
}
/*　topとbottomをY方向に移動させて3本の線に。秒数はバツから戻る時の秒数　 */
.bar-top{
transform: translateY(-4px);
transition: transform .3s;
}
.bar-bottom{
transform: translateY(4px);
transition: transform .3s;
}
.menu{
display: block;
font-size: 10px;
text-transform: uppercase;
color: #333;
font-weight: bold;
margin-left: 5px;
}
/* ハンバーガーボタンを押した後のバツの記述
rotateで角度を決める事ができるので好きなバツを作れます */
.bar.cross.bar-top{
transform: translateY(2px)rotate(30deg);
transition: .3s;
}
.bar.cross.bar-mid{
opacity: 0;
transition: opacity .3s;
}
.bar.cross.bar-bottom{
transform: translateY(-2px)rotate(-30deg);
transition: .5s;
}
/* メニューが開いた時に画面をスクロールしないようにする記述。
jQueryと組み合わせます。 */
body.noscroll{
overflow: hidden;
}
/* 　開いた時にX(0)で元の位置へ。
openというクラスをjQueryでつけます。　*/
.header-nav.open{
transform: translateX(0);
opacity: 1;
transform: transform .3s, opacity .3s;
}
/* 　薄暗い画面の記述　*/
.burger-musk{
display: none;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
/* 　buttonのリセットです。これをしないとどうなるか以下で紹介しますね。　*/
button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}