@charset "UTF-8";
/* CSS Document */
#check {
display: none;
}
/* Sp */
@media screen and (max-width : 725px ){

.burger_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 90;
	height: 25px; width: 25px;
	margin-top: 25px;
	position: absolute;
	top:20px;
	right:20px;
}

.burger_icon span,.burger_icon span:before,.burger_icon span:after {
  display: block;
  height: 3px;
  width: 25px;
  background-color: #323232;
  content: "";
  position: absolute;
}
	
.burger_icon span:before {
	bottom: 8px;
}

.burger_icon span:after {
	top: 8px;
}

/*clicked*/

#check:checked ~ .burger_icon span {
background-color: transparent;
}	
	
#check:checked ~ .burger_icon span:before {
	transform: rotate(45deg);
    bottom: 0;
}

#check:checked ~ .burger_icon span:after {
	transform: rotate(-45deg);
	top: 0;
}	
	
nav {
	position: fixed;
	top: 80px;
	left: 100%;
	z-index: 99;
	width: 100%;
	height:100vh;
	background-color: rgba(255, 255, 255, 0.8);
	padding-top: 40px
}

#check:checked ~ nav {
left: 0;
}
.nav{
	display:block;
}

.nav a{
	margin:0 auto 20px auto;
	opacity:1;
	transform-origin:center
}

/* ホバー効果 */
.nav a:hover{
	opacity:1;
	transform:scale(1);
	}
	
.sp_bar{
	display:block;
	width: 335px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
}
	
.sp_bar > img{
display: none 
	}

#spb_top{
	background-image:url("../images/sp_bar_top.jpg")
	}

#spb_about{
	background-image: url("../images/sp_bar_about.jpg")	
	}

#spb_staff{
	background-image: url("../images/sp_bar_staff.jpg")	
	}
#spb_menu{
	background-image: url("../images/sp_bar_menu.jpg")	
	}

#spb_access{
	background-image: url("../images/sp_bar_access.jpg")	
	}
	
.burger_icon span, .burger_icon  span:before, .burger_icon span:after {
    transition: all .4s;
	}

}