/* The home page's top bar and full-screen menu, for every other page (content pages, 会社概要 etc.).
   Markup from dahlia/execution/site/site_nav.py; the home page carries the same rules inline. Loaded after
   legal.css / content.css. On these pages the bar is always solid and sticks to the top. */
:root {
  --on-dark: #FBF5F0; --on-dark-soft: #E2D9D6; --line-dark: rgba(251,245,240,.2);
  --gutter: clamp(16px, 4vw, 56px);
}
.bar { position: sticky; top: 0; z-index: 40; background: rgba(26,13,18,.97); color: var(--on-dark);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(var(--gutter), env(safe-area-inset-right, 0px)) 12px max(var(--gutter), env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); }
.brand svg { width: 34px; height: 34px; }
.brand span { font-family: var(--display-en); font-size: 1.35rem; font-weight: 480; font-variation-settings: "SOFT" 100, "opsz" 72; color: var(--on-dark); }
.brand b { font-weight: 480; color: var(--blush); }
.bar-r { display: flex; align-items: center; gap: 10px; }
.nav { display: flex; gap: clamp(14px, 1.8vw, 28px); margin-left: auto; margin-right: 8px; }
.nav a { color: inherit; text-decoration: none; font-size: .9375rem; font-weight: 700; letter-spacing: .04em; opacity: .85; padding: .4em 0;
  background: linear-gradient(var(--blush), var(--blush)) no-repeat 0 100% / 0 1.5px; transition: opacity .2s, background-size .25s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; background-size: 100% 1.5px; }
.cta-sm { font-size: .9375rem; text-decoration: none; padding: .55em 1.2em; border-radius: 2px; background: var(--cream); color: var(--wine); font-weight: 700; white-space: nowrap; }
.menu-btn { display: grid; width: 44px; height: 44px; border: 1px solid rgba(251,245,240,.45); border-radius: 2px; background: transparent; color: inherit; cursor: pointer; place-items: center; padding: 0; }
.burger { display: grid; gap: 5px; width: 20px; }
.burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, translate .3s; }
.burger i:nth-child(2) { transition: opacity .2s; }
html.menu-open .burger i:first-child { translate: 0 7px; transform: rotate(45deg); }
html.menu-open .burger i:nth-child(2) { opacity: 0; }
html.menu-open .burger i:last-child { translate: 0 -7px; transform: rotate(-45deg); }
html.menu-open { overflow: hidden; }
.menu { position: fixed; inset: 0; z-index: 39; overflow-y: auto; overscroll-behavior: contain; color: var(--on-dark);
  background: radial-gradient(900px 600px at 100% 0%, rgba(122,31,61,.55), transparent 70%), var(--night);
  visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
html.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .3s; }
.menu-in { min-height: 100%; display: grid; align-content: center; gap: 32px;
  padding: calc(env(safe-area-inset-top, 0px) + 92px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 40px); width: min(880px, 100%); margin-inline: auto; }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.menu li a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark);
  text-decoration: none; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); font-weight: 700; letter-spacing: .03em; }
.menu li a span { font-family: var(--display-en); font-weight: 400; font-size: .875em; color: var(--blush); min-width: 1.8em; }
.menu li a:hover { color: var(--blush); }
.menu-pages { display: grid; gap: 6px; }
.menu-h { margin: 0; font-size: .8125rem; letter-spacing: .12em; color: var(--blush); font-weight: 700; }
.menu-pages ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.menu-pages li a { font-size: 1rem; padding: 10px 0; }
.menu-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9375rem; }
.menu-foot a { color: var(--on-dark-soft); font-weight: 500; }
@media (max-width: 1099px) { .nav { display: none; } }
@media (max-width: 600px) { .menu ol, .menu-pages ul { grid-template-columns: 1fr; } .menu li a { padding: 12px 0; } .cta-sm { padding: .5em .9em; } }
@media (prefers-reduced-motion: reduce) { .menu, .burger i { transition: none; } }