/* デスクトップ用メニュー */
.desktop-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
    min-width: 1000px;
  }
  
  .desktop-menu-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
  }
  
  .desktop-menu-items li {
	margin: 0 2px;
  }
  
  .desktop-menu-items li a {
	text-decoration: none;
	color: #fff;
	font-size: 16px;
  }
  
  .desktop-menu-items li a:hover {
	color: #0073e6;
  }
  
  /* ハンバーガーメニュー（モバイル用） */
  #navToggle {
	display: none; /* デスクトップでは非表示 */
	cursor: pointer;
	background: none;
	border: none;
	padding: 10px;
  }
  

/* スライドインメニュー（共通のスタイル） */
#mobile-menu {
	position: fixed;
	display: block;
	top: 0;
	right: -250px; /* 初期状態では画面外に配置 */
	width: 250px;
	height: 100%;
	background-color: #333;
	transition: transform 0.3s ease;
	z-index: 2;
	display: block;
}

.mobile-menu-items {
	list-style: none;
	padding: 10px;
	margin: 0;
  }
  
  .mobile-menu-items li {
	margin: 0 2px;
  }
  
  .mobile-menu-items li a {
	text-decoration: none;
	color: #fff;
	font-size: 16px;
  }
  
  .mobile-menu-items li a:hover {
	color: #0073e6;
  }

#navToggle {
    display:none; /*通常時は非表示にしておきます*/
	z-index:3;

    position:fixed; /*bodyに対しての絶対位置指定です*/
	right:5px;
	top:10px;
    /*width:30px;*/
    /*height:25px;*/
	
	width:25px;
	height:25px;

	border:solid 2px #fff;
	border-radius: 3px;
    cursor:pointer;
	padding: 0px;

}

#navToggle span {
    	display:block;
    	position:absolute; /*#navToggle div に対して*/
		margin-left: auto;
		margin-right: auto;
		left:2px;
    	width:20px;
    	border-bottom:solid 2px #fff;
    	-webkit-transition: .35s ease-in-out;
    	-moz-transition: .35s ease-in-out;
    	transition: .35s ease-in-out
	}
#navToggle span:nth-child(1) {top:6px;}
#navToggle span:nth-child(2) {top:12px;}
#navToggle span:nth-child(3) {top:18px;}

@media(max-width:750px){

    .desktop-menu{
        display:none;
    }

    #mobile-menu{
        padding-top:15px;
        padding-left: 2px;
    
    }
     #mobile-menu.openNav{
    /* スライドインメニューが開いているときの状態 */
    
        transform: translateX(-250px); /* メニューがスライドイン */
    
    
    }
    
/* Toggle(Button) */
/*display:noneだったボタンを display:blockにして表示します*/
#navToggle {display:block;}


/* Click Toggle(Button) */
/*ここから jQueryで header要素に付けた「.openNav」を利用します*/
/*.openNavが付いた要素内のボタン（#navToggle）内のspanへの指定*/
/*最初のspanをマイナス45度に*/
#navToggle.bt_click span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg)}
	
/*2番目と3番目のspanを45度に*/
#navToggle.bt_click span:nth-child(2),
#navToggle.bt_click span:nth-child(3) {
    top: 11px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg)}





}