header{background:linear-gradient(to right,var(--main-color-secondary),var(--main-color));color:var(--headers-color);padding:10px 10%;position:sticky;display:flex;top:0;z-index:100;width:100%;transition:height var(--transition-time)}header .pc{display:flex;gap:30px;align-items:center}header .logo{font-size:1.8em;font-weight:700;display:flex;align-items:center;gap:10px;transition:transform var(--transition-time)}header .menu-header{display:flex;gap:50px;align-items:center;justify-content:space-between;margin-left:calc(50vw - 50%);width:calc(100vw - 50%);padding:10px}header nav ul{list-style:none;display:flex;gap:15px}header nav ul li a{color:var(--headers-color);text-decoration:none;font-size:1em;transition:color var(--transition-time)}header nav ul li a:hover{color:var(--element-color-secondary)}header .drop-menu{display:none;align-items:center;flex-direction:column}header .drop-menu img{width:40px;height:30px;cursor:pointer;filter:invert(1)}header .menu-box{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:-101vw;width:100%;height:100%;background-color:var(--main-color-secondary);z-index:1000;transition:left var(--transition-time)}header .menu-box .content{display:flex;flex-direction:column;padding-top:70px;height:100%}header .menu-box .close{width:50px;height:50px;display:flex;justify-content:center;align-items:center;position:absolute;top:10px;right:5vw;padding:10px;border-radius:5px;cursor:pointer;filter:invert(1)}@media(max-width:768px){header .drop-menu{display:flex}header .pc{display:none}header .menu-header{width:100%;margin:0;display:flex;justify-content:space-between}}