@charset "UTF-8";

header{
   padding:10px;
   text-align:right;
   position:fixed;
   width:100%;
   box-sizing:border-box;
   z-index:1;
   height:40px;
}

#nav-drawer{
  position:relative;
}

.nav-unshown{
  display:none;
}

#nav-drawer .for_position{
  position:relative;
}

/* アイコンのスペース */
#nav-open{
  display:inline-block;
  width:50px;
  height:50px;
  vertical-align:middle;
  position:absolute;
  z-index:100;
  right:0;
}

#nav-open span,
#nav-open span:before,
#nav-open span:after{
  position:absolute;
  height:3px;
  width:25px;
  border-radius:3px;
  background:#fff;
  display:block;
  content:"";
  cursor:pointer;
  z-index:5;
  right:0;
  transition: all .4s;
  box-sizing:border-box;
  box-shadow: 0 3px 6px rgba(0,0,0,1);
}

#nav-open span:before{
  bottom: -8px;
}

#nav-open span:after{
  bottom:-16px
}

.close span{
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}

.close span:before{
  opacity:0;
}

.close span:after{
transform:translateY(-16px) rotate(90deg);
}

/* 閉じる用の薄くろカバー */
#nav-close{
  display:none;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  transition: .3s ease-in-out;
}

#nav-content{
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:4;
width:100%;
height:100%;
background:#000;
transition:.3s ease-in-out;
-webkit-transform:translate(-105%);
transform:translateY(-105%);
text-align:center;
}

#nav-content div:first-of-type{
  width:100%;
  height:100%;
  position:relative;
}

#nav-content ul{
  display:inline-block;
  color:#fff;
  text-align:center;
}

#nav-content ul li:first-of-type{
  margin-top:80px;
}

#nav-content ul li{
  display:block;
  line-height:1;
  margin:35px 0 0 0;
  font-size:3rem;
  font-family: 'Open Sans', sans-serif;
}

#nav-content ul li ul.icon-section{
  display:flex;
  width:100%;
  position:static;
  justify-content:space-around;
}

#nav-content ul li ul.icon-section li{
 margin-top:0;
}


#nav-input:checked ~ #nav-content{
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

@media screen and (max-width:321px){

  #nav-content ul li:first-of-type {
    margin-top: 40px;
}

  #nav-content ul li{
    margin: 40px 0 0 0;
    font-size: 2.2rem;
}

}