@charset "UTF-8";
/* CSS Document */



/*==================================================
FIX MENU
==================================================*/


.fixed-menu{
	position:fixed;
	top:30px;
	left:30px;
	z-index:9999;
	opacity:0;
	visibility:hidden;
	transition:
	opacity .35s ease,
	visibility .35s;
}

.fixed-menu.show{
	opacity:1;
	visibility:visible;

}



.fixed-logo{

	display:flex; margin: -10px 0 0 -20px;
	flex-direction:column; border: 1px solid #fff;
	align-items:flex-start;	background-color: rgba(2,2,2,0.7);padding: 20px 10px;
}


.fixed-title{
	font-size:24px;
	font-weight:900;
	line-height:.95;
	letter-spacing:.03em;
	color:#fff;
}


.fixed-title span{
	display:block;
}


.menu-btn{

	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	width:28px;
	height:22px;
	padding:0;
	background:none;
	border:none;
	cursor:pointer;
	margin-top: 20px;
}


.menu-btn span{

	display:block;
	width:28px;
	height:2px;

	background:#c60018;

	border-radius:2px;

	transition:.35s ease;

}

/* 真ん中だけ白 */

.menu-btn span:nth-child(2){

	background:#fff;

}


.menu-btn.active span:nth-child(1){

	transform:translateY(10px) rotate(45deg);

}

.menu-btn.active span:nth-child(2){

	opacity:0;

}

.menu-btn.active span:nth-child(3){

	transform:translateY(-10px) rotate(-45deg);

}


@media (min-width:1281px){
	.fixed-menu{
		left:50%;
		margin-left:-610px;	}
}


@media (max-width:850px){

.fixed-menu{
	top:auto;
	left:30;
	bottom:70px;}

}


@media (max-width:767px){
.fixed-logo{padding: 10px 10px;}
.fixed-title{font-size: 16px; line-height: 1.2;}
.menu-btn{margin-top: 10px;}
}


/*==================================================
nav
==================================================*/

.fixed-nav{

	position:absolute;
	top:120px;
	left:0;

	width:320px;
	box-sizing:border-box;

	padding:40px 30px;

	background:rgba(15,15,15,.95);
	border-left:3px solid #c60018;
	backdrop-filter:blur(8px);

	opacity:0;
	visibility:hidden;

	transform:translateY(10px);

	transition:
		opacity .35s ease,
		transform .35s ease,
		visibility .35s;
z-index:9998;
}

.fixed-nav.open{

	opacity:1;
	visibility:visible;

	transform:translateY(0);

}

@media (max-width:850px){

.fixed-nav{

	position:fixed;

	/*top:0;*/
	bottom: 150px;
	left:-320px;

	width:280px;
	/*height:100vh;*/

	padding:50px 30px 20px;

	transform:none;

	transition:
		left .35s ease,
		opacity .35s ease;

}

.fixed-nav.open{

	left:0;
	opacity:1;
	visibility:visible;

}

}

/*==================================================
MENU LINK
==================================================*/

.fixed-nav a{
	display:block;
	padding:14px 0;
	font-size:20px;
	font-weight:700;
	color:#fff;
	letter-spacing:.05em;
	border-bottom:1px solid rgba(255,255,255,.15);
	transition:.3s;
}


.fixed-nav a:hover{
	padding-left:10px;
	color:#d51d29;
}

@media (max-width:850px){
	.fixed-nav a{padding:7px 0;
	font-size:16px;}
}