:root{
	--header-bg-color:#000;
	--header-color:#fff;
	--header-height:56px;
	--humberger-menu-color:#333;
}
/*ヘッダー*/
.header{
	position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--header-bg-color);color:var(--header-color);
	display:flex;align-items:center;justify-content:space-between;
	padding:0 20px;
}
.header .title{position:absolute;left:50%;transform:translateX(-50%);font-size:20px;font-weight:bold;}
.header-left{
	position:absolute;left:20px;display:flex;align-items:center;gap:12px;
	top:50%;transform:translateY(-50%);
	cursor:pointer;
}
.header-right{
	position:absolute;right:20px;display:flex;align-items:center;gap:12px;
	top:50%;transform:translateY(-50%);
	cursor:pointer;
}
.header .user{
	display:flex;
	align-items:center;
	gap:8px;
}
.header .user .icon{width:38px;height:38px;border-radius:50%;background:#000;}
.header .user .name{text-decoration:none;position:relative;}
.header .user .name::after{
	background-color:#6f6f6f;content:'';bottom:-2px;height:2px;left:0;position:absolute;width:100%;
	transform:scale(0,1);transform-origin:center top;transition:transform.3s;
}
.header .user .name:hover::after{transform:scale(1,1);}

/*メイン*/
.main{flex:1;margin-top:var(--header-height);height:calc(100vh- var(--header-height));}

/*ハンバーガーボタン*/
.humberger-menu{left:16px;width:35px;height:28px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;}
.humberger-menu span{
	display:block;width:100%;height:4px;background-color:var(--humberger-menu-color);
	transition:all 0.3s ease;transform-origin:center;
}
.humberger-menu.active span:nth-child(1){transform:translateY(12px)rotate(45deg);}
.humberger-menu.active span:nth-child(2){transform:rotate(-45deg)}
.humberger-menu.active span:nth-child(3){transform:translateY(8px);}