@media screen and (max-width: 768px){
    
	
	/*========= ナビゲーションのためのCSS ===============*/

	#sp-gnav{
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		position:fixed;
		z-index: 999;
		/*ナビのスタート位置と形状*/
		top:0;
		right: -120%;
		width:100%;
		height: 100vh;/*ナビの高さ*/
		/*動き*/
		transition: all 0.3s;
		background-color: var(--main);
	}

	#sp-gnav.panelactive .bg{
		width: calc(100% - 20px);
        margin: 60px 0 0 0;
        background-color: #fff;
        padding: 30px 20px 50px;
	}

	/*アクティブクラスがついたら位置を0に*/
	#sp-gnav.panelactive{
		right: 0;
	}

	/*ナビゲーションの縦スクロール*/
	#sp-gnav.panelactive #g-nav-list{
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;/*表示する高さ*/
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		padding: 90px 20px 100px;
        margin: 90px 0 0 0;
        padding: 30px 20px 120px;
		width: calc(100% - 20px);
        background-color: #fff;
		text-align: left;
	}

	#sp-gnav.panelactive #g-nav-list .g-nav-ttl{
		font-size: 1.4rem;
        font-weight: bold;
        color: #fff;
        background: var(--main);
        padding: 6px 3px 3px 10px;
        /* margin: 0 0 0 50px; */
        line-height: 1;
        width: 100%;
	}

	#sp-gnav.panelactive #g-nav-list .g-nav-u-list a{
		display: block;
        color: #333;
        font-size: 1.5rem;
        padding: 16px 0 14px 0;
        font-weight: 500;
        position: relative;
        border-bottom: 1px #EDEDED solid;
	}

	#sp-gnav.panelactive #g-nav-list .g-nav-u-list a::before{
		display: block;
        content: "\f105";
        color: var(--main);
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        top: calc(50% - 10px);
        right: 15px;
	}


	/*========= ボタンのためのCSS ===============*/
	.sp-gnav-btn{
		position:relative;
		z-index: 9999;/*ボタンを最前面に*/
		top: 0;
		right: 0;
		cursor: pointer;
		width: 50px;
		height: 50px;
		background: #EFEFEF;
	}
	.header-contact .sp-gnav-btn ,
	.header-recruit .sp-gnav-btn {
		position: absolute;
		top: 0;
		right: 0;
	}
	.sp-gnav-btn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 20px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--main);
		width: 35%;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	
	/*(メニュー無しver) 
	.sp-gnav-btn span:nth-of-type(1) {
		top: 20px; 
	}
	.sp-gnav-btn span:nth-of-type(2) {
		top: 28px;
	}
	.sp-gnav-btn span:nth-of-type(3) {
		top: 36px;
	}*/
	
	/*(メニュー有りver) */
	.sp-gnav-btn span:nth-of-type(1) {
		top: 16px; 
	}
	.sp-gnav-btn span:nth-of-type(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	.sp-gnav-btn span:nth-of-type(3) {
		top: 32px;
	}
	
	/*×に変化*/
	.sp-gnav-btn.active{
		/* background: #fff; */
	}
	.sp-gnav-btn.active span{
		background-color: var(--main);
	}
	
	/*×に変化(メニュー無しver) 
	.sp-gnav-btn.active span:nth-of-type(1) {
		top: 22px;
		left: 19px;
		transform: translateY(6px) rotate(-45deg);
		width: 40%;
	}
	.sp-gnav-btn.active span:nth-of-type(2) {
		opacity: 0;
	}
	.sp-gnav-btn.active span:nth-of-type(3){
		top: 34px;
		left: 19px;
		transform: translateY(-6px) rotate(45deg);
		width: 40%;
	}*/	
	
	/*×に変化(メニュー有りver) */
	.sp-gnav-btn.active span:nth-of-type(1) {
		top: 18px;
        left: 0px;
        transform: translateY(6px) rotate(-45deg);
        width: 40%;
	}
	.sp-gnav-btn.active span:nth-of-type(2) {
		opacity: 0;
	}
	.sp-gnav-btn.active span:nth-of-type(3){
		top: 30px;
        left: 0px;
        transform: translateY(-6px) rotate(45deg);
        width: 40%;
	}
	
	/*** menu-txt ***/
	.sp-gnav-btn .menu-txt{
		font-size: 1.0rem;
		line-height: 1;
		color: #333;
		letter-spacing: 0;
		text-align: center;
		padding: 36px 0 0;
		left: 0.05em;		
	}

	/* .sp-gnav-btn.active .menu-txt{
		color: #fff;
	} */
}