:root {
  --nova-menu-orange: #f9ad28;
  --nova-menu-cream: #fff0b8;
  --nova-menu-pink: #ef636d;
  --nova-menu-ink: #22201f;
}

.nova-menu__trigger {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nova-menu-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;

  /* 横スクロールするページ（トップページ）で、スクロール後にこのボタンが
     再描画されず消えて見える不具合への対策。専用の合成レイヤーに昇格させて
     スクロールのたびに確実に描き直させる */
  transform: translateZ(0);
  will-change: transform;
}

.nova-menu__trigger span {
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #fff;
}

.nova-menu {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  z-index: 99999;
  background: rgba(75, 67, 27, 0.7);

  /* 注意: ここに transform/will-change を入れて専用の合成レイヤーに
     昇格させると、トップページ（<html> 自体を横スクロールさせる特殊な
     作り）で、半透明の背景が裏の「今のスクロール位置」を映さず、
     最初に描画された内容（ロゴ）のまま固定されて見える不具合が起きる。
     トリガーボタン側（透過なし）には付けているが、こちらには付けない */

  /* スマホ: 画面中央にパネルを出す（PC用の位置は下の @media で上書き） */
  display: grid;
  place-items: center;

  box-sizing: border-box;
}

.nova-menu[hidden] {
  display: none !important;
}

/* 開いた瞬間、背景を軽くフェードイン */
.nova-menu:not([hidden]) {
  animation: nova-menu-fade 0.2s ease-out;
}

@keyframes nova-menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nova-menu__panel {
  width: calc(100vw - 40px);
  max-width: 420px;
  max-height: calc(100dvh - 40px);

  margin: 20px;
  padding: 65px 25px 25px;

  box-sizing: border-box;
  overflow-y: auto;

  border: 2px solid #22201f;
  border-radius: 24px;
  background: #fff0b8;

  /* パネルが現れるときの動き。スマホは下から、PCはボタンの方向から
     (--nova-menu-pop-x/-y は下の @media で向きを変える) */
  --nova-menu-pop-x: 0px;
  --nova-menu-pop-y: 14px;
  animation: nova-menu-open 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes nova-menu-open {
  from {
    opacity: 0;
    transform: translate(var(--nova-menu-pop-x), var(--nova-menu-pop-y)) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 閉じるとき（nova-menu.js が is-closing を付ける）：開くときの逆。
   背景はフェードアウト、パネルは出てきた方向へ縮みながら消える */
.nova-menu.is-closing {
  animation: nova-menu-fade-out 0.2s ease-in both;
}

.nova-menu.is-closing .nova-menu__panel {
  animation: nova-menu-close 0.2s ease-in both;
}

@keyframes nova-menu-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes nova-menu-close {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate(var(--nova-menu-pop-x), var(--nova-menu-pop-y)) scale(0.94);
  }
}

.nova-menu__panel::-webkit-scrollbar {
  display: none;
}

.nova-menu__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nova-menu-orange);
  cursor: pointer;
}

.nova-menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 3px;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.nova-menu__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nova-menu__nav { display: flex; flex-direction: column; }

.nova-menu__nav a {
  padding: 10px 5px 8px;
  border-bottom: 1px solid #615b44;
  color: var(--nova-menu-ink);
  font-family: "Kiwi Maru", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* サイト全体で使っているフォント */
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.nova-menu__nav a:hover,
.nova-menu__nav a:focus-visible { color: #d97810; }

.nova-menu__footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nova-menu__logo { width: 300px; max-width: 70%; height: auto; }
.nova-menu__socials { display: flex; gap: 10px; margin-top: 10px; }

.nova-menu__socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--nova-menu-pink);
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

/* SNSアイコン画像。元画像が非常に大きい（数千px四方）ため、
   指定がないと原寸のまま表示されボタンからあふれ出す */
.nova-menu__social-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ===== PC（幅601px以上）: パネルを画面中央ではなく、
   トリガーボタン（右上, top:24px right:24px, 54px四方）の
   すぐ下に、右端をそろえて出す ===== */
@media (min-width: 601px) {
  .nova-menu__panel {
    position: fixed;
    top: 90px;
    right: 24px;
    width: 340px;
    max-width: calc(100vw - 48px);
    max-height: calc(100dvh - 114px);
    margin: 0;

    /* ボタンのある右上から滑り出すように */
    --nova-menu-pop-x: 10px;
    --nova-menu-pop-y: -12px;
  }
}

@media (max-width: 600px) {
  .nova-menu__trigger { top: 18px; right: 18px; width: 54px; height: 54px; }
  .nova-menu__panel { padding: 65px 25px 25px; border-radius: 24px; }
  .nova-menu__nav a { font-size: 19px; }
  .nova-menu__close { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .nova-menu,
  .nova-menu__panel,
  .nova-menu.is-closing,
  .nova-menu.is-closing .nova-menu__panel { animation: none; }
}