/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {
    text-align: right;
    right: 20px;
    top: 20px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 300;
    background-color: #000;
    transition: .2s;
}
.hamburger:hover {
    opacity: .5;
}
  
.hamburger__line {
    position: absolute;
    width: 40px;
    height: 1px;
    margin-top: 21px;
    right: 20px;
    background-color: #ddd;
    transition: all 0.5s;
}
  
.hamburger__line--1 {
    top: 10px;
}
  
.hamburger__line--2 {
    top: 18px;
}
  
.hamburger__line--3 {
    top: 26px;
}
  
/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {
    transform: rotate(135deg);
    top: 18px;
}
  
.open .hamburger__line--2 {
    opacity: 0;
}
  
.open .hamburger__line--3 {
    transform: rotate(225deg);
    top: 18px;
}
  
/* 
sp-nav(ナビ)
=================================== */
.sp-nav {
    position: fixed;
    top: 81px;
    right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
    width: calc(80% + 1px); /* 出てくるスライドメニューの幅 */
    height: calc(100vh - 81px);
    background-color: #fff;
    border-left: solid 1px #000;
    transition: all 0.5s;
    z-index: 9999;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
  
/*ハンバーガーがクリックされたら右からスライド*/
.open .sp-nav {
    right: 0;
}