@charset "UTF-8";
/*---------------------------
        
         1. header   

---------------------------*/

.NavArea{
	position: relative;

}





.header-sp {
/*  position: fixed;*/

/*  display: flex;*/
  justify-content: center;
  align-items: center;
  /*paddingとborderを幅と高さに含める*/
/*  box-sizing: border-box;*/
  background-color: #000 ;
  width: 100%;
  height: 60px;
  z-index: 9998;
/*  border-bottom: 1px solid #262421 ;*/
  /*下線の色が変わる時間を調整*/
  transition: all 1s ease;
	
	background-image: url(../images/menu-bg.png);
	background-position: center top;
	background-repeat: repeat;
	
	
}



/*           nav
---------------------------*/
nav {
  display: block;
  position: fixed;
	
  top: 0;
  /* ナビゲーションを表示させる位置を指定する */
  right: -1800px;
  bottom: 0;
  /* メニューアイコンを押下した際のナビゲーションメニューの横幅を指定する */
  width: 90%;
  background: #262421 ;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /*  ナビゲーションを表示する速度を指定する  */
  transition: all 0.8s;
  z-index: 4;
  opacity: 0;
}

.open nav {
  /* ナビゲーションの表示位置を指定する */
  right: 0;
  /* ナビゲーションの透過率を指定する */
  opacity: 1;
}

nav .inner {
  padding: 4.0625rem 1.5625rem 1rem 1.5625rem;
}

nav .inner ul {
  display: inlineblock;
  list-style: none;
  line-height: 1;
  margin: 0;
}

nav .inner ul li {
  position: relative;
  margin: 15px 0;
}

nav .inner ul li a {
	display: block;
	color: #fff;
	font-size: 1rem;
	transition-duration: 0.2s;
	text-decoration: none;
	border: 1px solid #5CDFE7;
	border-radius: 5px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	text-align: center;
}

nav .inner ul li a:hover {
	border: 1px solid #EDCE24;	
}







nav .nav-sns-erea,nav .nav-other-erea {
  margin-top: 30px;
}

nav .nav-sns-erea li,nav .nav-other-erea li {
  color: #fff ;
  font-size: 0.9375rem;
}
.other-contents a {
  text-decoration:none;
}

nav .txt-title {
  color: #919090 ;
  font-size: 0.75rem;
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

nav .sns-contents,nav .other-contents {
  margin-top: 10px;
}

nav .sns-contents p {
  display: inline-block;
}

nav .other-contents p {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
}

/*       toggle_btn
---------------------------*/
.toggle_btn {
  display: block;
/*  position: fixed;*/
	 position:absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 3;
	
}
.toggle_btn .open {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 1px;
  background-color: #fff ;
  border-radius: 4px;
}
/*
.toggle_btn .open:nth-child(1) {
  top: 15px;
}
.toggle_btn .open:nth-child(2) {
  top: 20px;
}
.toggle_btn .open:nth-child(3) {
  top: 25px;
}
*/

.toggle_btn .open:nth-child(1) {
  top: 5px;
}
.toggle_btn .open:nth-child(2) {
  top: 15px;
}
.toggle_btn .open:nth-child(3) {
  top: 25px;
}





/*1つ目の要素のafter要素にMenu表示を指定する*/
.toggle_btn .open:nth-child(1)::after {
/*  content:"Menu";*/
	 content:"";
  position: absolute;
  top: -15px;
  left: 0;
  color: #fff ;
  font-size: 0.625rem;
  line-height: 1;
  text-transform: uppercase;
}

/* クリック時にハンバーガーメニューを非表示にする */
.open .toggle_btn .open {
  display: none;
}

/*       close_btn
---------------------------*/
/* 非表示にしたハンバーガーメニューの変わりに表示するアイコンを指定する */
.close_btn .close::before {
  position: absolute;
  top: 0px;
  left: -20px;
  font-family: 'Font Awesome 5 Free';
  content: "\f057";
  font-size: 1rem;
  font-weight: 600;
}

.close_btn {
  position: absolute;
  color: #fff ;
  cursor: pointer;
  /* 非表示にしたハンバーガーメニューの変わりにCLOSEを表示する位置を指定する   */
  top: calc(0% + 25px);
  left: calc(100% - 80px);
  z-index: 4;
}

/*          mask
---------------------------*/
 #mask  {
  display: none;
  transition: all .5s;
}

/* ナビゲーションが展開された部分の外側余白を指定する */
.open #mask  {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000 ;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}