@charset "utf-8";
/* CSS Document */
.button_container{
     position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  width: 50px;
    height:50px;
  cursor: pointer;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
	z-index: 99;
	top: 30px;
    right: 30px;
}
/*ボタン内側*/

.button_container span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
  background-color: #666;
  }
.button_container span:nth-of-type(1) {
  top:22px; 
    width: 50%;
}

.button_container span:nth-of-type(2) {
  top:29px;
    width:50%;
}
.button_container span:nth-of-type(3) {
  top:36px;
    width:50%;
}
/*activeクラスが付与されると線が回転して×に*/

.button_container.active span:nth-of-type(1) {
    top: 20px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 35%;
}

.button_container.active span:nth-of-type(2) {
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 35%;
}
.button_container.active span:nth-of-type(3){display: none;
}
.overlay {
    position: fixed;
	background:rgba(255,255,255,0.97);
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    z-index: 20;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100vh;
	z-index: 11;
}
.overlay_menu {
    position: relative;
    height: 70%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
.overlay ul li {
    display: block;
    height: 10%;
    height: calc(100% / 10);
    min-height: 35px;
    position: relative;
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	.button_container{
		    top: 20px;
    right: 20px;
	}
}