header .SP{
  padding:10px;
  position: fixed;
  z-index: 100;
  right: 4%;
}


#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 27px;
  height: 35px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 1px;/*線の太さ*/
  width: 25px;/*長さ*/
  background: #946243;
  display: block;
  content: '';
  cursor: pointer;
  margin-top: 7.5px;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 21px;
  width: 60px;
  height: 60px;
  opacity: 0;
  transition: .3s ease-in-out;
}

.fas{font-size: 41px;position:fixed;right:2%;top:3%;}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 30%;

  height: 400px;

  transition: .3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
}

/*メニューの中身！私が作ったやつ！！！*/
#nav-content{

}
#nav-content .SP img{
  width: 100%;
  position: relative;
}
#nav-content .SP h3{
  position: absolute;
  top:20px;
  right:80px;
  font-size: 31px;
}

#nav-content .SP ul{
  position: absolute;
  top:11vw;
  right:50%;
  font-size: 18px;
  line-height: 2.3;
  letter-spacing: 4px;
}

#nav-content .SP a{text-decoration: none;color: black;}

#nav-content .SP a:hover{
  opacity: 0.5 ;
}
/*メニューの中身！12月25日に作ったやつ！！！*/
#nav-content section ul{display: flex;
  flex-direction: column;
  text-align: center;
  background: yellow;

  margin:auto;
  }
#nav-content section ul a{width: 100%;height: 100px;line-height: 100px;color: black;font-size: 20px;}





/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content{overflow: hidden;}


.header-logo-menu{

  position: fixed;
right: 2%;
top: 2%;
z-index: 100;

 /*display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;*/
}




.nav_top,.cafe,.book{border-bottom: solid 1px;}
/* 通常時はホバー時の文字を非表示にする */
a .hover{
display: none;
}
/* ホバー時は通常時の文字を非表示にする */
a:hover .nomal{
display: none;
}
/* ホバー時に、ホバー時の文字を表示する */
a:hover .hover{
display: inline;
}

#HEADER .menu p{display:none;}



/*ロゴやサイトタイトルをセンタリング*/
.logo-area{text-align:center;margin:auto;}

/* ============ここからスマホ_768px以下============ */
@media only screen and (max-width:768px){
/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 100%;


  height: 280px;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);


}

/* ============1225作った=========== */
#nav-content section ul{display: flex;text-align: center;flex-direction: column;justify-content: initial;height: auto;}
#nav-content section ul a{width: 100%;height: 70px;line-height: 70px;}

.fas{font-size: 35px;right: 3%;top:1%;}

#HEADER p{display:none;}

}