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

* {
  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));
}


/*****checkboxを見えなくする*****/

.ham-checkbox {
  display:none;
}


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

.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;
}


/*------------------------------------------
    checkboxがonの時の設定
------------------------------------------*/

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

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

.ham-checkbox:checked ~ .ham-wrapper .ham-icon::before , 
.ham-checkbox:checked ~ .ham-wrapper .ham-icon::after {
  top:0;
}

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

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


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

.ham-checkbox:checked ~ .ham-nav {
  transform:scale(1,1);
}