:root {
--onav-washi:      #FAF8F3; --onav-washi-deep: #F3EFE6; --onav-ink:        #33322E; --onav-ink-soft:   #7A756A; --onav-accent:     #17606E; --onav-line:       rgba(51, 50, 46, .09); --onav-shadow:     0 14px 44px -14px rgba(23, 60, 68, .22),
0 2px 8px rgba(23, 60, 68, .05);
--onav-radius:     10px;
--onav-font:       "Inter", "Noto Sans JP", sans-serif;
--onav-ease:       cubic-bezier(.33, .1, .25, 1);
--onav-dur:        .2s;
} #gnav .c-gnavList > li > a,
#gnav .c-gnav > li > a {
font-family: var(--onav-font);
font-size: 17px;
font-weight: 500;
letter-spacing: .03em;
line-height: 1.6;
color: var(--onav-ink);
} #gnav .c-gnavList > li > a:hover,
#gnav .c-gnav > li > a:hover {
color: var(--onav-accent);
transition: color var(--onav-dur) var(--onav-ease);
} #gnav .c-gnavList .sub-menu,
#gnav .c-gnav .sub-menu {
min-width: 280px;
padding: 18px 0 20px;
background: var(--onav-washi);
border: 1px solid var(--onav-line);
border-radius: var(--onav-radius);
box-shadow: var(--onav-shadow);
overflow: hidden;  opacity: 0;
transform: translateY(6px);
transition:
opacity var(--onav-dur) var(--onav-ease),
transform var(--onav-dur) var(--onav-ease),
visibility 0s linear var(--onav-dur);
}
#gnav .c-gnavList > li:hover > .sub-menu,
#gnav .c-gnavList > li:focus-within > .sub-menu,
#gnav .c-gnav > li:hover > .sub-menu,
#gnav .c-gnav > li:focus-within > .sub-menu {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--onav-dur) var(--onav-ease),
transform var(--onav-dur) var(--onav-ease);
} #gnav .sub-menu li a {
position: relative;
display: block;
padding: 13px 30px 13px 32px;
font-family: var(--onav-font);
font-size: 15px;
font-weight: 500;
letter-spacing: .03em;
line-height: 1.6;
color: var(--onav-ink);
background: transparent;
transition: color var(--onav-dur) var(--onav-ease);
} #gnav .sub-menu li + li:not(.onav-label) > a {
border-top: 1px solid var(--onav-line);
}
#gnav .sub-menu li.onav-label + li > a {
border-top: none;
} #gnav .sub-menu li a::before {
content: "";
position: absolute;
left: 0;
top: 22%;
bottom: 22%;
width: 2px;
background: var(--onav-accent);
transform: scaleY(0);
transform-origin: center;
transition: transform var(--onav-dur) var(--onav-ease);
}
#gnav .sub-menu li a:hover,
#gnav .sub-menu li a:focus-visible {
color: var(--onav-accent);
background: transparent;
}
#gnav .sub-menu li a:hover::before,
#gnav .sub-menu li a:focus-visible::before {
transform: scaleY(1);
} #gnav .sub-menu li.onav-label > a,
.p-spMenu .c-listMenu li.onav-label > a,
.c-spMenu .c-listMenu li.onav-label > a {
pointer-events: none;
cursor: default;
display: flex;
align-items: center;
gap: 10px;
padding: 22px 30px 8px 32px;
font-size: 11px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--onav-ink-soft);
border-top: none !important;
background: transparent !important;
} #gnav .sub-menu li.onav-label > a::after,
.p-spMenu .c-listMenu li.onav-label > a::after,
.c-spMenu .c-listMenu li.onav-label > a::after {
content: "";
order: -1;
width: 14px;
height: 1px;
background: var(--onav-accent);
flex-shrink: 0;
} #gnav .sub-menu li.onav-label > a::before {
display: none;
} #gnav .sub-menu li.onav-label:first-child > a {
padding-top: 6px;
} li.onav-label > a > .c-submenuBtn,
li.onav-label .c-submenuToggleBtn {
display: none !important;
} #sp_menu,
#sp_menu .p-spMenu__inner,
.p-spMenu,
.p-spMenu__inner,
.c-spMenu,
.c-spMenu__inner {
background: var(--onav-washi);
} #sp_menu.p-spMenu,
.p-spMenu {
transition: transform .38s cubic-bezier(.32, .08, .18, 1),
opacity .38s cubic-bezier(.32, .08, .18, 1);
} .p-spMenu__ttl,
.c-spMenu__title,
#sp_menu .menu_title {
background: transparent;
padding: 26px 24px 14px;
margin: 0 24px;
padding-left: 0;
padding-right: 0;
font-family: var(--onav-font);
font-size: 12px;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--onav-accent);
border-bottom: 1px solid var(--onav-line);
text-align: left;
} .p-spMenu__closeBtn,
.c-spMenu__closeIcon,
#sp_menu .c-iconBtn {
color: var(--onav-ink);
} .p-spMenu .c-listMenu,
.c-spMenu .c-listMenu {
padding: 10px 24px 40px;
}
.p-spMenu .c-listMenu a,
.c-spMenu .c-listMenu a {
display: flex;
align-items: center;
min-height: 56px; padding: 14px 4px;
font-family: var(--onav-font);
font-size: 16px;
font-weight: 500;
letter-spacing: .03em;
line-height: 1.6;
color: var(--onav-ink);
background: transparent;
border-bottom: 1px solid var(--onav-line);
} .p-spMenu .c-listMenu a::before,
.c-spMenu .c-listMenu a::before {
display: none;
} .p-spMenu .c-listMenu .sub-menu a,
.c-spMenu .c-listMenu .sub-menu a {
min-height: 52px;
padding-left: 20px;
font-size: 15px;
color: var(--onav-ink);
} .p-spMenu .c-listMenu li.onav-label > a,
.c-spMenu .c-listMenu li.onav-label > a {
min-height: 0;
padding: 22px 4px 6px 20px;
border-bottom: none;
} .p-spMenu .c-listMenu a:active,
.c-spMenu .c-listMenu a:active {
color: var(--onav-accent);
} #gnav a:focus-visible,
.p-spMenu a:focus-visible,
.c-spMenu a:focus-visible {
outline: 1px solid var(--onav-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
#gnav .sub-menu,
#sp_menu.p-spMenu,
.p-spMenu,
#gnav .sub-menu li a::before {
transition: none !important;
}
} #sp_menu .c-widget__title.-spmenu {
background: transparent;
color: var(--onav-accent);
margin: 0 24px;
padding: 26px 0 14px;
font-family: var(--onav-font);
font-size: 12px;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid var(--onav-line);
} #gnav .sub-menu li.onav-label > a {
gap: 8px;
padding-left: 32px;
} #gnav .sub-menu li.onav-label > a::after,
.p-spMenu .c-listMenu li.onav-label > a::after,
.c-spMenu .c-listMenu li.onav-label > a::after {
display: none !important;
}