/* ========== header ========== */

#navigation header#header { position: fixed; width: 100%; top: 0; z-index: var(--z-header); background: transparent; transition: background .25s, box-shadow .25s, border-color .25s; border-bottom: 1rem solid transparent; z-index: 9995;}
#navigation header#header.scrolled { background: #fff; border-bottom-color: #eee; }
#navigation .head-in { width: min(var(--content), 100% - 48rem); margin: 0 auto; height: 80rem; display: flex; align-items: center; justify-content: space-between; }
#navigation .logo-link { display: flex; align-items: center; }
#navigation .logo-pc { width: 300rem; height: auto; max-height: 33rem; object-fit: contain; }
#navigation .logo-mo { display: none; width: 188rem; height: auto; max-height: 21rem; object-fit: contain; }
#navigation .nav-pc { display: flex; align-items: center; gap: 40rem; margin-left: auto; margin-right: 36rem; }
#navigation .nav-pc a { font-size: 18rem; font-weight: 500; transition: color .2s, font-weight .2s; }
#navigation .nav-pc a:hover { color: var(--green); font-weight: 700; }
#navigation .head-cta { display: flex; align-items: center; gap: 14rem; }
#navigation .head-cta .btn-sm { height: 40rem; padding: 0 24rem; font-size: 16rem; font-weight: 700; letter-spacing: -0.16rem; border-radius: 8rem; }
#navigation .hamburger { display: none; width: 44rem; height: 44rem; align-items: center; justify-content: center; flex-shrink: 0; }
#navigation .hamburger span { display: block; width: 24rem; height: 2.5rem; background: var(--ink); border-radius: 2rem; position: relative; transition: .25s; }
#navigation .hamburger span::before, #navigation .hamburger span::after { content: ''; position: absolute; left: 0; width: 24rem; height: 2.5rem; background: var(--ink); border-radius: 2rem; transition: .25s; }
#navigation .hamburger span::before { top: -7rem; }
#navigation .hamburger span::after { top: 7rem; }
#navigation .hamburger.open span { background: transparent; }
#navigation .hamburger.open span::before { top: 0; transform: rotate(45deg); }
#navigation .hamburger.open span::after { top: 0; transform: rotate(-45deg); }

#navigation .drawer { position: fixed; inset: 0 0 0 auto; width: 84%; max-width: 340rem; background: #fff; z-index: 9996; transform: translateX(100%); transition: transform .3s var(--ease); padding: 28rem 24rem; display: flex; flex-direction: column; gap: 8rem; box-shadow: -10rem 0 40rem rgba(0, 0, 0, .12); }
#navigation .drawer.open { transform: translateX(0); }
#navigation .drawer-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 399; opacity: 0; pointer-events: none; transition: opacity .3s; }
#navigation .drawer-scrim.open { opacity: 1; pointer-events: auto; }
#navigation .drawer-close { align-self: flex-end; font-size: 26rem; line-height: 1; color: var(--t3); padding: 4rem 8rem; }
#navigation .drawer a { padding: 16rem 8rem; font-size: 18rem; font-weight: 600; border-bottom: 1rem solid #f0f0f0; }

#navigation .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8rem; font-weight: 700; border-radius: 8rem; transition: all .2s var(--ease); white-space: nowrap; text-decoration: none; border: none; cursor: pointer; font-family: inherit; }
#navigation .btn-green { background: var(--green); color: #fff; }
#navigation .btn-green:hover { background: var(--green-600); }

@media screen and (max-width: 991px) {
    #navigation .logo-pc { display: none; }
    #navigation .logo-mo { display: block; }
    #navigation .nav-pc,
    #navigation .head-cta .btn { display: none; }
    #navigation .hamburger { display: flex; }
    #navigation .head-in { height: 64rem; }
}