/* bubun — site-wide SVG logo and six-line menu.
   A single shared stylesheet for all static HTML pages.
   Do not edit menu geometry separately in individual pages. */

body.bubun-site {
  --symbol-color: #777777;
  --symbol-stroke: 1px;
  overflow-x: hidden;
}

/* Header is as wide as the homepage photograph on landscape screens. */
body.bubun-site .site-header-wrap {
  width: min(100vw, 1000px, max(280px, calc(100svh - 190px)));
  margin: 0 auto;
}

body.bubun-site .site-header {
  position: relative;
  z-index: 110;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

body.bubun-site .site-logo {
  display: flex;
  width: 52px;
  height: 54px;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

/* Exact SVG paths and the 48x50 size approved on the homepage. */
body.bubun-site .site-logo svg.site-logo-svg {
  display: block;
  width: 48px;
  height: 50px;
  flex-shrink: 0;
  overflow: visible;
}
body.bubun-site .site-logo-svg line,
body.bubun-site .site-logo-svg circle,
body.bubun-site .site-logo-svg path {
  fill: none;
  stroke: var(--symbol-color);
  stroke-width: var(--symbol-stroke);
  stroke-linecap: butt;
  stroke-miterlimit: 10;
  vector-effect: non-scaling-stroke;
}

body.bubun-site .site-menu-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  color: var(--symbol-color);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.bubun-site .site-menu-button:focus-visible {
  outline: 1px solid #999;
  outline-offset: 3px;
}
body.bubun-site .site-menu-symbol {
  display: block;
  width: 51px;
  height: 46px;
  overflow: visible;
}
body.bubun-site .site-menu-segment {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--symbol-stroke);
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

/* Opening phase 1: split the six rows at their centre. */
body.bubun-site .site-menu-half {
  transform: translateX(0);
  transition: transform .15s ease .27s;
}
body.bubun-site.site-menu-open .site-menu-half--left {
  transform: translateX(-4px);
  transition: transform .15s ease 0s;
}
body.bubun-site.site-menu-open .site-menu-half--right {
  transform: translateX(4px);
  transition: transform .15s ease 0s;
}

/* Phase 2: remove the four inner rows. */
body.bubun-site .site-menu-segment--middle {
  opacity: 1;
  transition: opacity .12s ease .27s;
}
body.bubun-site.site-menu-open .site-menu-segment--middle {
  opacity: 0;
  transition: opacity .12s ease .15s;
}

/* Phase 3: four corner segments rotate into an X with an empty centre. */
body.bubun-site .site-menu-segment--tl,
body.bubun-site .site-menu-segment--tr,
body.bubun-site .site-menu-segment--bl,
body.bubun-site .site-menu-segment--br {
  transform-box: view-box;
  transform: none;
  transition: transform .27s cubic-bezier(.2,.75,.2,1) 0s;
}
body.bubun-site .site-menu-segment--tl { transform-origin: 13px 0.5px; }
body.bubun-site .site-menu-segment--tr { transform-origin: 38px 0.5px; }
body.bubun-site .site-menu-segment--bl { transform-origin: 13px 45.5px; }
body.bubun-site .site-menu-segment--br { transform-origin: 38px 45.5px; }
body.bubun-site.site-menu-open .site-menu-segment--tl {
  transform: translate(3px, 10px) rotate(45deg) scaleX(1.08);
  transition-delay: .15s;
}
body.bubun-site.site-menu-open .site-menu-segment--tr {
  transform: translate(-3px, 10px) rotate(-45deg) scaleX(1.08);
  transition-delay: .15s;
}
body.bubun-site.site-menu-open .site-menu-segment--bl {
  transform: translate(3px, -10px) rotate(-45deg) scaleX(1.08);
  transition-delay: .15s;
}
body.bubun-site.site-menu-open .site-menu-segment--br {
  transform: translate(-3px, -10px) rotate(45deg) scaleX(1.08);
  transition-delay: .15s;
}

/* A 90%-opaque white overlay; underlying content remains faintly visible. */
body.bubun-site .site-menu {
  position: fixed;
  z-index: 100;
  inset: 0;
  box-sizing: border-box;
  min-height: 100svh;
  padding: 110px 20px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .90);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
body.bubun-site.site-menu-open .site-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s ease;
}
body.bubun-site .site-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
body.bubun-site .site-menu-links a {
  display: inline-block;
  color: #777;
  font-family: "Times New Roman", "Hiragino Mincho Pro W3", "Yu Mincho", serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .025em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: color .2s ease, opacity .35s ease, transform .4s ease;
}
body.bubun-site.site-menu-open .site-menu-links a {
  opacity: 1;
  transform: translateY(0);
}
body.bubun-site.site-menu-open .site-menu-links a:nth-child(2) { transition-delay: .035s; }
body.bubun-site.site-menu-open .site-menu-links a:nth-child(3) { transition-delay: .07s; }
body.bubun-site.site-menu-open .site-menu-links a:nth-child(4) { transition-delay: .105s; }
body.bubun-site.site-menu-open .site-menu-links a:nth-child(5) { transition-delay: .14s; }
body.bubun-site.site-menu-open .site-menu-links a:nth-child(6) { transition-delay: .175s; }
body.bubun-site.site-menu-open .site-menu-links a:nth-child(7) { transition-delay: .21s; }
body.bubun-site .site-menu-links a:hover { color: #222; }
body.bubun-site .site-menu-links a:focus-visible { outline: 1px solid #999; outline-offset: 4px; }
body.bubun-site.site-menu-open { overflow: hidden; }

body.bubun-site .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* On portrait screens, the picture / content may be full-width, but the icons are inset. */
@media (orientation: portrait) {
  body.bubun-site .site-header-wrap {
    width: 100%;
    max-width: none;
  }
  body.bubun-site .site-header {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bubun-site .site-menu,
  body.bubun-site .site-menu-half,
  body.bubun-site .site-menu-segment,
  body.bubun-site .site-menu-links a {
    transition: none !important;
  }
}