/*------------------------------------------
        リセット
------------------------------------------*/

* {
  padding:0;
  margin:0;
}


/*------------------------------------------
        スタイル設定
------------------------------------------*/

/*****headerのスタイル設定*****/

.header {
  background:#CCC;
  width:100%;
  height:50px;
  position:fixed;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.5));
}


/*****クリックできる範囲を拡張＆配置*****/

.ham-wrapper {
  display:block;
  width:40px;
  height:30px;
  position:absolute;
  top:7px;
  right:7px;
}


/*****三本線のスタイル設定*****/

.ham-icon , 
.ham-icon::before , 
.ham-icon::after {
  background-color:#333;
  width:40px;
  height:4px;
  right:0;
}

.ham-icon {
  position:relative;
  top:15px;
}

.ham-icon::before , 
.ham-icon::after {
  content:"";
  display:block;
  position:absolute;
}

.ham-icon::before {
  top:-15px;
}

.ham-icon::after {
  top:15px;
}


/*****ナビゲーションのスタイル設定*****/

.ham-nav {
  transform:scale(1,0);
  background-color:#CCC;
  position:fixed;
  width:100%;
  height:calc(100vh - 50px);
  top:50px;
  left:0;
  overflow-y:auto;
}

.ham-nav ul {
  padding:0 10%;
  border-top:1px solid #333;
}

.ham-nav li {
  list-style:none;
  border-bottom:1px solid #333;
}

.ham-nav a {
  display:block;
  padding:20px 0;
  text-align:center;
  text-decoration:none;
}


/*------------------------------------------
    .activeが付いた時の設定
------------------------------------------*/

/*****Ｘの設定*****/

.ham-wrapper.active .ham-icon {
  background-color:rgba(0,0,0,0);
}

.ham-wrapper.active .ham-icon::before , 
.ham-wrapper.active .ham-icon::after {
  top:0;
}

.ham-wrapper.active .ham-icon::before {
  transform:rotate(45deg);
}

.ham-wrapper.active .ham-icon::after {
  transform:rotate(-45deg);
}


/*****ナビゲーションの設定*****/

.ham-nav.active {
  transform:scale(1,1);
}


/*------------------------------------------
    ナビゲーションの位置調整
------------------------------------------*/

.ham-nav {
  z-index:-1;
}


/*------------------------------------------
    動きの設定
------------------------------------------*/

/*****Ｘの設定*****/

.ham-icon {
  transition:background 0.3s ease;
}

.ham-icon::before , 
.ham-icon::after {
  transition:top 0.3s ease , transform 0.3s ease;
}


/*****ナビゲーションの設定*****/

.ham-nav {
  transition:transform 0.6s ease;
  transform-origin:top;
}


/*****ナビゲーションのhoverアニメーション*****/

.ham-nav a {
  transition:all 0.2s ease;
  position:relative;
}
  
.ham-nav a::before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-color:#333;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  transform:scale(0,1);
  transition:transform 0.3s ease;
  transform-origin:right top;
}
    
.ham-nav a:hover {
  color: #FFF;
}
    
.ham-nav a:hover::before {
  transform:scale(1,1);
  transform-origin:left top;
}

$('#js-ham-toggle').on('click', function () { //#js-ham-toggleをクリックしたら
  $('#js-ham-toggle').toggleClass('active'); //#js-ham-toggleにactiveクラスを付け外し
  $('#js-ham-nav').toggleClass('active'); //js-ham-navにactiveクラスを付け外し
});