@charset "utf-8";
@media screen and (min-width: 820px) {
	.sp{
		display: none;
	}
	.pc{
		display: block;
	}
	main{
		margin: 100px 0 0 0 !important;
	}
	header{
		height: 100px;
	}
	header nav{
		position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
	}
	header nav::before{
		content: '';
    width: 100px;
    height: 100px;
    background: var(--accent);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 21;
	}
	header nav .nav_btn{
		display: block;
    position: fixed;
    top: 1.5%;
    right: 13px;
    z-index: 30;
    width: 70px;
    height: 70px;
    cursor: pointer;
	}
	header .nav_btn:before,
	header .nav_btn:after{
		background: var(--page_color_thin);
	}
	header nav ul{
		width: 400px;
		height: 100vh;
		padding: 20vh 30px 0;
		top: 0;
		right: -50vw;
		z-index: 20;
	}
	header nav.active ul{
		top: 0;
		right: -50px;
	}
	header nav ul li{
		margin: 0 20px 10px;
	}
	header nav ul li.inner{
		margin: 0 30px 10px;
	}
}