.header-dekitabi {
width: 100%;
z-index: 3;
background: #1a2b49;
border-bottom: 1px solid lightgray;
}
.header-dekitabi a,
.header-menu a {
display: inline-block;
line-height: 20px;
}
.header-dekitabi button,
.header-menu button {
background: none;
border: none;
cursor: pointer;
}
.header-dekitabi .header-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0 5px;
height: 55px;
display: flex;
align-items: center;
}
.header-dekitabi .header-dekitabi-menu-icon {
position: absolute;
top: 0;
bottom: 0;
right: 10px;
filter: invert(100%) sepia(3%) saturate(3%) hue-rotate(333deg)
brightness(104%) contrast(100%);
} .header-menu {
position: fixed;
background: rgba(255, 255, 255, 0.95);
width: 100%;
height: 100lvh;
top: 0;
color: #1a2b49;
font-weight: 600;
z-index: 10;
text-align: center;
display: none;
align-items: center;
justify-content: center;
padding: 10px;
}
.header-menu.active {
display: flex;
}
.header-menu-wrapper {
position: relative;
background-color: white; padding: 25px;
border-radius: 10px;
}
.header-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.header-menu .close-icon-menu {
filter: invert(50%) sepia(58%) saturate(4816%) hue-rotate(192deg)
brightness(95%) contrast(93%);
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.header-menu .close-icon-menu:hover {
filter: invert(11%) sepia(91%) saturate(7480%) hue-rotate(329deg)
brightness(95%) contrast(110%);
}
}
.header-menu .header-menu-wrapper {
background-color: white;
padding: 25px;
border-radius: 10px;
}
.header-menu .menu-ul {
font-size: 1.1em;
position: relative;
margin: 20px 0;
}
.header-menu .menu-ul li {
width: 100%;
margin: 10px 0;
}
.header-menu .menu-ul li a {
color: #1a2b49;
font-weight: 600;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.header-menu .menu-ul li a:hover {
color: #2186eb;
}
}
.header-menu .apps {
display: flex;
justify-content: center;
gap: 5px;
flex-wrap: wrap;
}
.header-menu .apps img {
transition: all 0.1s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
.header-menu .apps img:hover {
transform: scale(1.02);
}
}
.header-menu .footer-social-media {
display: flex;
align-items: center;
justify-content: center;
gap: 0 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.header-menu .footer-social-media a img {
transition: all 0.1s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
.header-menu .footer-social-media a:hover img {
transform: scale(1.1);
}
}