@charset "utf-8";
/* CSS Document */

/*

navigation

*/

div#navigation{
	width:100%;
	text-align:center;
	position:fixed;
	left:0;
	top:0;
	z-index: 110;
}

div#navigation > header{
	width:100%;
	height:45px;
	background: linear-gradient(to bottom, #D4552E, #C23C21);
	text-align: center;
	position:fixed;
	left:0;
	top:0;
	z-index:120;
	cursor:pointer;
}

.nav_logo{
	width:45%;
	margin:10px auto 0;
}

div#navigation > nav {
	width:100%;
	height:100vh;
	position:relative;
	background:rgba(255,255,255,0.95) url("../images/nav3/sp_nav_sil.png") no-repeat center;
	background-size:50%; 
	z-index:100;
	display:none;
}

div#navigation > nav > ul{
	width:44%;
	margin:0 auto 0;
	padding:80px 0 0;
}

div#navigation > nav > ul li{
	margin:0 auto 12%;
}

div#navigation > nav > ul li:last-child{
	margin-left:-10%;
	padding-top:0.5em;
}

div#navigation > nav > ul li img{
	width:100%;
}

#nav_cls{
	width:50px;
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:110;
	display:none;
}

#btnpagetop{
	position: fixed;
	width:50px;
	height:50px;
	bottom: 10px;
	right: 10px;
	z-index:70;
}


/*----------ハンバーガーアイコン----------*/

.hamburger {
  position:fixed;
  top:12px;
  right:12px;
  display: block;
  width: 30px;
  height: 20px;
  z-index: 160;
  box-sizing: border-box;
}
.hamburger  span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #F8EED1;
  margin: 0 auto;
}
.hamburger  span:nth-of-type(1) {
  top: 0;
}
.hamburger  span:nth-of-type(2) {
  top: 9px;
}
.hamburger  span:nth-of-type(3) {
  bottom: 0;
}

.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;
}
.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(8px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) 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(10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(10px) rotate(45deg);
  }
}


@keyframes active-menu-ber01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}


@-webkit-keyframes active-menu-ber03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
}


@keyframes active-menu-ber03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}