header { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 64px; background-color: #ffffff; box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); transition: .2s; } body.is-header-nav { height: 100%; overflow: hidden; } header.scroll { top: calc( -1 * (64px + 10px) ); } body.is-header-nav header.scroll { top: 0; } .header-bottom { display: inline-block; width: 100%; height: 64px; } .header-wrapper { position: relative; width: 100%; height: 64px; display: flex; justify-content: space-between; align-items: center; flex-direction: row; font-family: 'Raleway', 'Noto Sans JP', sans-serif; } .logo-wrapper { margin: 5px 5px 5px 25px; font-size: 20px; font-weight: 900; color: #8d8d8d; } .logo-wrapper span { font-weight: 500; color: #6b6b6b; margin-left: 8px; } .gnavi__inner { width: max-content; max-width: 980px; height: 64px; margin: 0; } .gnavi ul { height: 100%; display: flex; } .gnavi li { position: relative; display: flex; } #menu-btn-check { display: none; } .gnavi li a { display: flex; justify-content: center; padding: 0 10px; background-color: #ffffff; box-shadow: none; border-radius: 5px; color: #5d5d5d; margin: 10px 0 10px 10px; font-weight: 400; } .gnavi li a:hover { background-color: #efefef; } .gnavi li.action a { display: flex; justify-content: center; padding: 0 20px; background-color: #fff; box-shadow: none; border: #dadce0 1px solid; border-radius: 5px; color: #1a73e8; margin: 10px 0 10px 10px; } .gnavi li.action a:hover { border-color: #1a73e8; background-color: #eef4fc; transition: .2s; } .gnavi li.action.action-main a { background-color: #1a73e8; color: #fff; border-color: #1a73e8; } .gnavi li.action.action-main a:hover { background-color: #2986ff; transition: .2s; } .gnavi li:last-of-type a { margin-right: 10px; } .gnavi span { display: flex; align-items: center; } a { color: inherit; text-decoration: none; } @media screen and (max-width: 800px) { #nav-toggle { height: 60px; width: 60px; display: inline-block; } #nav-toggle { height: 60px; width: 60px; margin: 0; padding: 0; position: relative; } #nav-toggle label { display: inline-block; height: 60px; width: 60px; margin: 0; padding: 0; cursor: pointer; } #nav-toggle label > span, #nav-toggle label > span::before, #nav-toggle label > span::after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #dddddd; position: absolute; left: 50%; margin-left: calc(25px / -2); top: 50%; margin-top: calc(3px / -2); transition: .2s; } #nav-toggle label > span::before { margin-top: calc(3px / -2 - 8px); } #nav-toggle label > span::after { margin-top: calc(3px / -2 + 8px); } #menu-btn-check { display: none; } #menu-btn-check:checked ~ .menu-btn span { background-color: rgba(255, 255, 255, 0); } #menu-btn-check:checked ~ .menu-btn span::before { transform: rotate(45deg); margin-top: 0; } #menu-btn-check:checked ~ .menu-btn span::after { transform: rotate(-45deg); margin-top: 0; } .gnavi { position: fixed; display: block; width: 100%; height: calc( 100% - 64px ); top: 64px; right: -100%; background-color: #ffffff; overflow-y: auto; border-top: #ddd 1px solid; transition: .2s; } #menu-btn-check:checked ~ .gnavi { right: 0; } .gnavi__inner { width: 100%; } .gnavi ul { flex-direction: column; width: 100%; margin-top: 13px; } .gnavi li { width: 100%; display: inline-block; } .gnavi li a { background-color: #ffffff; font-size: 20px; padding: 10px 20px; justify-content: flex-start; margin: 0 10px; border-radius: 6px; } .gnavi li.action a { margin: 10px; padding: 10px; margin-bottom: 0; } }