@charset "utf-8";

.menu-box {
  position: fixed;
  top: 0;/* ハンバーガーメニューの初期位置・縦軸 */
  right: 0;/* ハンバーガーメニューの初期位置・横軸 */
  box-sizing: border-box;
}

.menu-box #nav-toggle {
  position: relative;
  z-index: 1001;
  margin: 1.5rem 0.8rem 0 0 ;
  width: 3rem;
  padding: 0.5rem;
  height: 2rem;
  cursor: pointer;
}

/* open close アイコン設定 */

.menu-box #nav-toggle .open {
  display: block;
}

.menu-box #nav-toggle .close {
  display: none;
}

.menu-box.open #nav-toggle .close{
  display: block
}

.menu-box.open #nav-toggle .open{
  display: none;
}

/* #nav-toggle 切り替えアニメーション */

.menu-box ul {
  position: absolute;
  top: 0;/* ナビの初期位置・縦軸 */
  right: -100vw;/* ナビの初期位置・横軸=画面外・右方向 */
  z-index: 1000;
  box-sizing: border-box;
  width: 30vw;
  padding: 8rem 0 3rem;/* #nav-toggleの高さ+margin */
  height: fit-content;/* ページ内リンクのみなら削除推奨 */
  background-color: #ffffffbc;
  transition: 0.6s;
}


/* .menu-box ulの設定 */

.menu-box.open ul {
  top: 0;/* ナビの利用時位置・縦軸 */
  right: 0;/* ナビの利用時位置・横軸 */
}

.menu-box ul li{
  width: 70%;
  margin: 0 auto;
}

.menu-box ul li a {
	display: block;
	width: fit-content;
	padding: 0.5rem 0.8rem;
	margin: 1rem auto 0.3rem;
	text-decoration: none;
	color: #000;
	transition: 0.8s;
	border-bottom: 1px solid transparent;
}

.menu-box ul li a:hover,
.menu-box ul li a:active {
	color: #d3d3d3;
	border-bottom: 1px solid #000;
}

.menu-box ul .sns-box {
	margin: 1rem 0;
}

.menu-box ul .sns-box li a img {
	width: 1.2rem;
	transition: 0.5s;
}

.menu-box ul .sns-box li a:hover,
.menu-box ul .sns-box li a:active {
	opacity: 50%;
	border-bottom: 1px solid transparent;
}


/* 各種ページ */

/* home */

.home .menu-box ul > li:first-child {
	border-bottom: 1px solid #000;
}

.home .menu-box ul li:first-child a {
	border-bottom: none;
	color: #818181;
}

/* news */

.news .menu-box ul > li:nth-child(2) {
	border-bottom: 1px solid #000;
}

.news .menu-box li:nth-child(2) a {
	border-bottom: none;
	color: #818181;
}

/* profile */

.profile .menu-box ul > li:nth-child(3) {
	border-bottom: 1px solid #000;
}

.profile .menu-box ul li:nth-child(3) a {
	border-bottom: none;
	color: #818181;
}

/* works */

.works .menu-box ul > li:nth-child(4) {
	border-bottom: 1px solid #000;
}

.works .menu-box ul li:nth-child(4) a {
	border-bottom: none;
	color: #818181;
}

/* contact */

.contact .menu-box ul > li:nth-child(5) {
	border-bottom: 1px solid #000;
}

.contact .menu-box ul li:nth-child(5) a {
	border-bottom: none;
	color: #818181;
}