/* CSS Document */
/* ===============================================
  ハンバーガーアイコン
=============================================== */
/*----------ハンバーガーアイコン----------*/
.hamburger {
	position: absolute;
	top: 0;
	right: 0;
  	display: block;
  	width: 54px;
	height: 54px;
  	z-index: 99999;
  	box-sizing: border-box;
}
.hamburger  span {
  	display: inline-block;
  	transition: all .4s;
  	box-sizing: border-box;
  	position: absolute;
	text-align: center;
  	left: 15px;
 	width: 24px;
  	height: 2px;
  	margin: 0 auto;
}
.hamburger  span:nth-of-type(1) {
  	top: 35%;;
}
.hamburger  span:nth-of-type(2) {
  	top: 50%;
}
.hamburger  span:nth-of-type(3) {
  	top: 65%;
}

.hamburger  span:nth-of-type(1) {
  -webkit-animation: menu-ber01 .75s forwards;
  animation: menu-ber01 .75s forwards;
}
.hamburger  span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
.hamburger  span:nth-of-type(3) {
  -webkit-animation: menu-ber02 .75s forwards;
  animation: menu-ber02 .75s forwards;
}

.active span:nth-of-type(1) {
  -webkit-animation: active-menu-ber01 .75s forwards;
  animation: active-menu-ber01 .75s forwards;
}
.active span:nth-of-type(2) {
  opacity: 0;
}
.active span:nth-of-type(3) {
  -webkit-animation: active-menu-ber03 .75s forwards;
  animation: active-menu-ber03 .75s forwards;
}
@-webkit-keyframes menu-ber01 {
  0% {
    -webkit-transform: translateY(6px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(6px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-ber01 {
  0% {
    transform: translateY(6px) rotate(45deg);
  }
  50% {
    transform: translateY(6px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@-webkit-keyframes menu-ber02 {
  0% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-ber02 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@-webkit-keyframes active-menu-ber01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(7px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(7px) rotate(45deg);
  }
}
@keyframes active-menu-ber01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(7px) rotate(45deg);
  }
}
@-webkit-keyframes active-menu-ber03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-6px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-6px) rotate(-45deg);
  }
}
@keyframes active-menu-ber03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}
/*----------ナビゲーション----------*/
#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99998;
}
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu .navigation_item{
  width: 300px;
  height: 40px;
  margin: 16px auto 0 auto;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  -webkit-animation: upper-right 0.4s 0.4s forwards;
  animation: upper-right 0.4s 0.4s forwards;
}
@-webkit-keyframes upper-right{
  0% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
    clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
    clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
  }
}
@keyframes upper-right{
  0% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
    clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
    clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
  }
}
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu .navigation_item{
  width: 300px;
  height: 40px;
  margin: 16px auto 0 auto;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a .navigation_text{
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
	text-align: center;
  font-size: 22px;
  line-height: 40px;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-animation: rota 1.2s 0.6s forwards;
  animation: rota 0.4s 0.7s forwards;
}
@-webkit-keyframes rota{
  0% {
   -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  }
  100% {
    -webkit-transform: rotateY(0);
  transform: rotateY(0);
  }
}
@keyframes rota{
  0% {
   -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  }
  100% {
   -webkit-transform: rotateY(0);
  transform: rotateY(0);
  }
}