/* 開閉ボタンだけを装飾。メニュー本体は各ページの従来スタイルを使用。 */
.menu-icon {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #d5bcc4;
  border-radius: 50%;
  background: #fffaf7;
  color: #795462;
  box-shadow: 0 3px 12px #54344012;
  cursor: pointer;
  z-index: 1000;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.menu-icon:hover {
  background: #f9edf1;
  border-color: #aa788b;
  box-shadow: 0 4px 16px #54344020;
}
.menu-icon:focus-visible { outline: 3px solid #986033; outline-offset: 4px; }
.menu-icon .line {
  position: absolute;
  display: block;
  left: 12px;
  top: 22px;
  width: 22px;
  height: 2px;
  margin: 0;
  border-radius: 2px;
  color: inherit;
  background: currentColor;
  opacity: 1;
  transform-origin: center;
  transition: top .18s ease .18s, transform .18s ease, opacity .15s ease .15s;
}
.menu-icon .line:nth-child(1) { top: 15px; }
.menu-icon .line:nth-child(3) { top: 29px; }
/* 3本の線が中央に集まってから、上下の線が回転して閉じる印になる。 */
.menu-icon.open .line {
  top: 22px;
  transition: top .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1) .18s, opacity .12s ease;
}
.menu-icon.open .line:nth-child(1) { transform: rotate(45deg); }
.menu-icon.open .line:nth-child(2) { transform: scaleX(0); opacity: 0; }
.menu-icon.open .line:nth-child(3) { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .menu-icon, .menu-icon .line, .menu-icon.open .line { transition: none; }
}