/*========= Loading ===============*/
#splash {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999; /* 土台 */
}
/* バー wrap */
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  max-width: 100%;
  z-index: 10001;
}

/* バー レールvbar*/
.vbar {
  width: 100%;
  position: relative;
  height: 1px;
  background: #000; /* レールの色 */
  border-radius: 2px;
  z-index: 10001;
}
.vbar__fill {
  width: 100%; /* ← ここが重要：基準幅を持たせる */
  height: 100%;
  background: #ddd; /* ← 走る線 */
  transform: none;
  display: block;
  transform-origin: left center;
  transform: scaleX(0); /* JS/GSAPで 0→1 にする */
}

/* 左上テキスト（GSAPでopacity制御） */
.splash-headline {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10002; /* カバーより前面に */
  color: #fff;
  transition: none; /* GSAPで制御するので不要なCSS遷移は切る */
  font-size: clamp(12px, 0.83vw, 14px);
  letter-spacing: 0.04em;
}

.vbar__label {
  margin-top: 0.8rem;
  font-size: 1rem;
  text-align: center;
  color: #fff; /* 黒背景上で見える色に */
}

/* カバー（デフォは前面だが、テキスト/バーより一段下） */
.loader_cover {
  position: absolute;
  inset: 0;
  background-color: #fff;
  z-index: 10000; /* ← 明示（10001の下） */
  transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1);
  opacity: 1;
}

/* 黒い帯（背景） */
.splash-headline__inner {
  display: flex;
  flex-direction: column;
}

/* 行は「箱」：相対配置。背景は付けない */
.splash-headline__line {
  position: relative;
  display: inline-block; /* 行ごとに積む（OK） */
  line-height: 1.2;
  width: max-content;
}

/* 黒帯は別要素（.band）に背景を持たせ、幅100%を“元幅”として確保 */
.splash-headline__line .band {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%; /* ★これが超重要：元の幅 */
  height: 1.2em; /* 帯の太さは好みで */
  background: #000; /* 黒帯 */
  transform-origin: left center;
  transform: scaleX(0); /* JS/GSAPで 0→1 に */
  z-index: 0;
}

/* テキストは帯の上に。色はここで白にする */
.splash-headline__line .text {
  position: relative;
  z-index: 1;
  color: #fff;

  /* 必要ならパディングで帯の厚みに合わせて余白調整 */
  /* padding: 0.1em 0; */
}
/* ローディング中（#splash内）の時計の仮スタイル：右下固定 */
.splash-clock {
  position: absolute;
  right: 20px;
  top: 52%;
  z-index: 10002; /* バーや見出しと同層 */
  color: #000; /* #splashが黒地なら白 */
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
  opacity: 1 !important;
}

/*********/

.logo-wrap {
  position: fixed;
  inset: 20px 0 auto 0; /* 必要なら top/left のみでもOK */
  mix-blend-mode: difference;
  display: flex;
  justify-content: center; /* 中央寄せ（必要に応じて変更） */
  z-index: 10;
  width: var(--logo-w-normal);
  margin: auto;
}
.logo-wrap .logo path,
.logo-wrap .logo g,
.logo-wrap .logo rect {
  fill: currentColor;
}

/* SVG 色は currentColor、差分で白に見せる */
.logo-wrap .logo {
  display: block;
  width: var(--logo-w-normal);
  height: auto;
  color: #fff; /* MV上で白に差分 */
  transform-origin: top;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
.logo-wrap .logo * {
  fill: currentColor !important;
  stroke: none !important;
}

/* MV時のスケール＆シフト（header依存をやめ、bodyの状態クラスで制御） */
.is-over-mv.logo-wrap .logo {
  transform: translateY(calc(var(--drop-y, 0px) + var(--logo-shift-overmv)))
    scale(var(--logo-scale-overmv));
}

/* ドロップ中は transform のトランジションを止める */
.logo-wrap .logo.is-dropping {
  transition: none !important;
}

/* ローディング直後～ドロップ直前までロゴは絶対に見せない */
body.pre-drop .logo-wrap .logo {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important; /* ここで発火させない */
}

/* ドロップ中はtransformトランジションを止める（往復対策で既に案内のやつ） */
.logo-wrap .logo.is-dropping {
  transition: none !important;
}

.navigation {
  position: fixed;
  color: #fff;
  top: 0px;
  right: 0px;
  z-index: 100; /* higher than .menu-overlay (25) */
  display: flex;
  align-items: center;
  /*gap: 25px;*/
  pointer-events: auto;
  mix-blend-mode: difference;
}
/**/
.menu-toggle {
  width: 11.31px;
  height: 11.31px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 31px;
}

/* 閉じている時： */
.menu-toggle.is-closed::before {
  content: '';
  position: absolute;
  /*top: 30px;
  right: 20px;*/
  width: 8px;
  height: 8px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg); /* 中央に配置＋45度回転 */
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.menu-toggle.is-closed.is-animating::before {
  transform: translate(-50%, -50%) rotate(90deg) scale(1.8);
  opacity: 0;
}

/* 開いている時：×印（2本の棒） */
.menu-toggle.is-open::before,
.menu-toggle.is-open::after {
  content: '';
  position: absolute;
  top: 30px;
  right: 10px;
  width: 20px; /* 棒の長さ */
  height: 1px; /* 棒の太さ */
  background: currentColor;
  transform-origin: center;
}

.menu-toggle.is-open::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle.is-open::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/**/
body.over-list .navigation {
  color: #000;
  mix-blend-mode: normal;
}

body.over-list .menu-toggle.is-closed::before {
  background: #000;
}

.navigation .menu-toggle:focus-visible {
  outline: 2px solid #6aa9ff;
  outline-offset: 2px;
}
.navigation .menu-toggle:focus-visible {
  outline: 2px solid #6aa9ff;
  outline-offset: 2px;
}
/* body に .menu-open が付いた時にページ側で必要ならスタイルを当てられるようにします */
body.menu-open {
  background-color: #333;
}

.subsc {
  letter-spacing: 0.04em;
  font-size: 12px;
  display: none; /*用意できるまで非表示*/
}
/* ===== Fullscreen Drop Menu ===== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-rows: 1fr auto; /* center + footer */
  background: #000;
  color: #fff;
  /*translate: 0 -100%;*/
  opacity: 0;
  pointer-events: none;
  transition: translate 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 420ms;
}
.menu-overlay .close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100; /* overlay内で一番上に */
  background: none;
  border: none;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}
body.menu-open .menu-overlay {
  translate: 0 0;
  opacity: 1;
  pointer-events: auto;
  z-index: 20;
}

.menu-inner {
  display: flex;
  align-items: end;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px); /* 少し下に */
  transition: opacity 1s ease, transform 0.6s ease;
}
.menu-open .menu-inner {
  opacity: 1;
  transform: translateY(0);
}
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
  transition: opacity 0.9s ease;
  opacity: 0;
  letter-spacing: 0.07em;
}
.menu-open .menu-overlay[aria-hidden='false'] .menu-list {
  opacity: 1;
}

.menu-list .spacer {
  margin-bottom: 22px;
}
.lang-switch .lang-btn {
  margin-left: 10px;
  padding-right: 5px;
}
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  color: inherit;
}

.lang-btn[aria-pressed='true'] {
  text-decoration: underline;
}
.menu-accordion__inner.lang_jp p {
  font-size: clamp(12px, 0.63rem, 16px);
  line-height: 2;
}

.lang_jp,
.lang_en {
  transition: opacity 0.3s ease;
}

[hidden] {
  display: none !important;
}

.menu-list a {
  position: relative;
  display: inline-block;
  color: transparent; /* 初期は見せない */
  transition: color 0.5s ease 0.5s; /* 帯が伸びた後に文字色を変える */
  z-index: 0;
  color: #fff;
  padding: 3px;
}

/* 背景帯 */
.menu-list a::before {
  content: '';
  position: absolute;
  inset: 0; /* 全面に広げる */
  background: #fff; /* 白帯 */
  transform: scaleX(0); /* 初期はゼロ幅 */
  transform-origin: right center; /* 右から左に伸ばす */
  transition: transform 0.3s ease;
  z-index: -1; /* テキストの後ろ */
}

.menu-list a:hover::before,
.menu-list a[aria-expanded='true']::before {
  transform: scaleX(1);
}

.menu-list a:hover,
.menu-list a[aria-expanded='true'] {
  color: #000; /* テキストを後からフェードイン */
}

.menu-list a.no-band::before {
  content: none; /* 疑似要素を消す */
}
.menu-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  opacity: 0.85;
  font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .menu-overlay {
    transition: none;
  }
}

/* ===== menu_contents_wrap as fullscreen overlay container ===== */
.menu_contents_wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns:
    1fr
    clamp(240px, 26.6vw, 480px) /* 中央の写真列 */
    1fr;

  /* 16〜40px を 1440 換算：40px ≒ 2.78vw */
  gap: clamp(16px, 2.78vw, 40px);

  /* 16〜20px を 1440 換算：20px ≒ 1.39vw */
  padding: clamp(16px, 1.39vw, 20px);

  background: #000;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: translate 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 420ms; /* ← 420ms 経過後に hidden へ */
}
body.menu-open .menu_contents_wrap {
  translate: 0 0;
  opacity: 1;
  pointer-events: auto;
  z-index: 20;
  visibility: visible;
  transition: translate 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}
/* 閉じアニメ中：menu-open は付けたまま、見た目だけ 0 にする */
body.menu-open .menu_contents_wrap.is-closing {
  opacity: 0;
  pointer-events: none; /* 閉じ中はクリック無効に */
}

.menu_contents_center {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: auto;
}
.menu_contents_center .cover-img {
  width: clamp(200px, 26.6vw, 520px);
  height: auto;
  opacity: 0;
  transform: translateY(16px); /* 少し下に */
  transition: opacity 1s ease, transform 0.6s ease;
}
.menu-open .menu_contents_center img {
  opacity: 1;
  transform: translateY(0);
}

/* image block */
.menu_contents_wrap > div:nth-child(2) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 64px auto;
}

/* override inner nav: use static inside wrapper (wrapper controls overlaying) */
.menu_contents_wrap nav.menu-overlay {
  position: static;
  inset: auto;
  z-index: auto;
  background: transparent;
  translate: none;
  opacity: 1;
  pointer-events: auto;
}
.menu_contents_wrap nav.menu-overlay .menu-inner {
  justify-content: flex-end;
}
.menu_contents_wrap nav.menu-overlay .menu-list {
  text-align: right;
}

/**contents**/
.menu_contents_left {
  font-size: 0.75rem;
  align-self: center;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(16px); /* 少し下に */
  transition: opacity 1s ease, transform 0.6s ease;
  letter-spacing: 0.04em;
}
.menu-open .menu_contents_left {
  opacity: 1;
  transform: translateY(0);
}

.menu_contents_right {
  font-size: 0.75rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.lang_jp {
  font-family: YakuHanJP, 'futura-pt', 'Yu Gothic Pr6N L', sans-serif;
  font-weight: 300;
}

.link-btn-wrap {
  position: static;
  display: grid; /* ← flex から変更 */
  grid-template-columns: none;
  gap: unset; /* ボタン間の余白 */
  width: auto;
  text-align: center;
  z-index: 1000;
  margin: 64px auto 44px auto;
}

.link-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1.8rem;
  border: 1px solid #fff;
  border-radius: 9999px;
  color: #fff;
  font-size: clamp(14px, 1.35vw, 16px);
  text-decoration: none;
  background: #000;
  letter-spacing: 0.04em;

  /* ← transition をまとめて1つに */
  transition: background 0.3s ease, color 0.3s ease, opacity 1s ease,
    transform 0.6s ease;

  opacity: 0;
  transform: translateY(20px);
}

.link-btn:hover {
  background: #fff;
  color: #000;
}

.link-btn:hover {
  background: #fff;
  color: #000;
}
.link-btn .icon-link {
  vertical-align: middle;
  margin-left: 6px;
  transition: filter 0.1s; /* スムーズに反転 */
}

.link-btn:hover .icon-link {
  filter: invert(1); /* アイコンも反転 */
}
.btn-subsc {
  display: none;
}

.cover-amazon:hover .link-btn {
  background: #fff; /* 背景を白に */
  color: #000; /* 文字を黒に */
  border-color: #fff;
}
.cover-amazon:hover .icon-link {
  filter: invert(1); /* アイコンも反転 */
}

.menu-open .link-btn {
  opacity: 1;
  transform: translateY(0);
}

.btn-amazon .icon-buyamazon {
  width: 10px;
  height: auto;
  display: inline-block;
  margin: 0 !important;
}

/* 子要素もフェードダウン（open時の逆向き） */
.menu_contents_wrap.is-closing .menu-inner,
.menu_contents_wrap.is-closing .menu-list,
.menu_contents_wrap.is-closing .menu_contents_center .cover-img,
.menu_contents_wrap.is-closing .menu_contents_left,
.menu_contents_wrap.is-closing .link-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.icon {
  width: 20px;
  height: 20px;
}
.icon path {
  fill: #fff;
}

#email {
  text-decoration: underline;
}

/* Mobile: stack vertically with scroll if needed */
@media (max-width: 960px) {
  .logo-wrap {
    inset: 15px 0 auto 0;
    width: var(--logo-w-normal);
    margin: auto;
  }
  .navigation {
    top: 0px;
    right: 0px;
  }
  .link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    transform: translateX(0px);
    transform: translateY(10px);
    width: calc(100vw - 30px);
  }
  .menu-open .link-btn {
    transform: translateY(0px);
  }
  .subsc {
    display: none;
  }

  /* 個別transformを全部オフ：translate も transform と同様に固定の基準を作る */
  .menu_contents_wrap,
  .menu-overlay {
    transform: none !important;
    translate: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
  }

  .menu_contents_wrap {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    overflow: auto;
    padding: clamp(16px, 4vw, 32px);
    gap: clamp(12px, 3vw, 24px);
  }

  .menu_contents_left {
    margin: 36px auto 110px auto;
    order: 2;
    width: 80vw;
  }
  .menu_contents_center {
    order: 1;
    margin-top: 74px;
  }
  .menu-open .menu_contents_center .cover-img {
    width: 80vw;
    margin: 0 auto;
  }
  .link-btn-wrap {
    position: fixed;
    display: grid;
    grid-auto-flow: column; /* 子を横並びに自動配置 */
    grid-auto-columns: max-content; /* 各ボタンは内容幅 */
    justify-content: center; /* まとめて中央寄せ */
    gap: 8px;
    width: auto;
    text-align: center;
    z-index: 1000;
    margin: 0;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }
  a.btn-subsc {
    /*display: inline-block;用意できるまで非表示*/
    display: none;
  }
  .menu_contents_right {
    order: 3;
  }
  .menu_contents_wrap nav.menu-overlay .menu-inner {
    width: 100%;
  }
  .menu-list a,
  .menu-list {
    font-size: 1.3rem;
  }

  .menu-list .icon {
    width: 24px;
    height: 24px;
  }
  .menu_footer_logo {
    margin: 60px auto 120px auto;
  }
  .menu_footer_logo img {
    width: 180px;
    filter: invert(100);
  }
  /* 960px以下の時だけ適用 */

  .menu_contents_center,
  .cover-amazon {
    transform: none !important; /* ★ これで fixed が正しく働く */
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
  }

  /* 閉じている時： ◆*/
  .menu-toggle.is-closed::before {
    top: 26px;
    right: 15px;
  }
  .menu-toggle.is-open::before,
  .menu-toggle.is-open::after {
    content: '';
    position: absolute;
    top: 26px;
    right: 3px;
    left: auto;
    width: 22px;
  }
}

/**video-sectionで推せないように*/
body.over-video:not(.menu-open) .menu_contents_wrap,
body.over-video:not(.menu-open) .menu_contents_wrap * {
  pointer-events: none !important;
}

/*mediakit toggle*/
.menu-accordion {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
  will-change: max-height, opacity, transform;
}

.menu-accordion__inner {
  padding: 1rem 0 1.25rem;
}

/* 開いた状態 */
.menu-accordion.is-open {
  /* max-height はJSで scrollHeight を入れるので、ここはクラスの目印だけ */
  opacity: 1;
  transform: translateY(0);
}

/* メニューの横幅に合わせて文字をなじませる（任意） */
.menu-accordion__inner p {
  margin: 0;
  line-height: 1.6;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  text-align: right;
  font-size: 0.75rem;
}

/* hidden を確実に隠す（他の指定に勝つ） */
.menu-accordion[hidden] {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
}

/***btn***/
.cover-amazon {
  display: grid;
  position: relative;
}

/* 画像 */
.cover-amazon .cover-img {
  display: block;
  width: 100%;
  transition: transform 0.5s ease;
}

/* --- hover時（親にまとめて指定）--- */
.cover-amazon:hover .cover-img {
  transform: scale(1.05); /* 画像をズーム */
}

/* bar の通常位置 */

/* video-section に入った時の位置 */
body.over-video #bars,
body.menu-open #bars {
  bottom: 20px;
}

/* scrollCue 非表示 */
body.over-video #scrolldown,
body.menu-open #scrolldown {
  display: none;
}

body.over-list .scrolldown::after {
  background: #fff;
}

/* 一回だけ再生するフェードアップ */
@keyframes fadeUpOnce {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表示になった言語ブロックにだけ一発再生 */
.lang_jp.fade-up-replay,
.lang_en.fade-up-replay {
  animation: fadeUpOnce 0.8s ease;
}
.lang_en.fade-up-replay {
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
  .lang_jp.fade-up-replay,
  .lang_en.fade-up-replay {
    animation: none;
  }
}
/* 1) ナビを最前面＆必ずクリック可に */
@media (max-width: 960px) {
  .navigation {
    z-index: 9998; /* #splash(9999) より上に */
    pointer-events: auto !important;
  }
  .navigation .menu-toggle {
    pointer-events: auto !important;
    cursor: pointer; /* 念のため明示 */
    padding: 25px;
  }
}

/* 2) 非表示オーバーレイは必ずクリックを通す */
#splash[aria-hidden='true'],
.loader_cover[aria-hidden='true'],
.menu-overlay[aria-hidden='true'] {
  pointer-events: none !important;
}

/* 3) メニュー閉じている間、ラッパーは絶対クリックを奪わない */
.menu-overlay:not(.is-open),
body:not(.menu-open) .menu_contents_wrap {
  pointer-events: none !important;
  z-index: -1 !important; /* 画面背面に */
}

/* 4) メニュー開いたら必要なものだけ有効化 */
body.menu-open .menu-overlay,
body.menu-open .menu_contents_wrap {
  pointer-events: auto !important;
  z-index: 20 !important; /* ただし .navigation よりは下 */
}

/* 5) 万一カバー画像ブロックが被っている場合の保険 */
@media (max-width: 960px) {
  .menu_contents_center,
  .cover-amazon {
    pointer-events: none !important; /* 閉じている時は絶対に奪わない */
  }
  body.menu-open .menu_contents_center,
  body.menu-open .cover-amazon {
    pointer-events: auto !important; /* 開いたら復帰 */
  }
}

/* ====== hover最終形の維持 & 逆再生のための追加 ====== */

/* ホバー“維持”用：拡大したまま見せる（最後のコマ） */
.menu-toggle.is-closed.is-hovering::before {
  transform: translate(-50%, -50%) rotate(90deg) scale(1.8);
  opacity: 1;
}

.menu-toggle.is-closed.is-animating:not(.is-reverse)::before {
  opacity: 1; /* ← ここが重要：消えない */
}

/* 逆再生 */
.menu-toggle.is-closed.is-animating.is-reverse::before {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  opacity: 1;
}

/* 開いている（×）が常に優先。保険で hover維持を無効化 */
.menu-toggle.is-open.is-hovering::before,
.menu-toggle.is-open.is-hovering::after {
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 1;
}
.menu-toggle.is-open.is-hovering::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.email {
  text-decoration: underline;
}

.menu_contents_left .lang_en p {
  font-family: 'futura-pt', sans-serif;
  font-weight: 500;
}

/**/
/* ボタン本体 */
#menuToggle {
  position: relative;
}

/* ×アイコンのラッパー（メニューOPEN中だけ見える） */
#menuToggle .xwrap {
  position: absolute;
  inset: 0; /* ボタン内中央に配置する前提 */
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 200ms linear;
  will-change: transform, opacity;
}

/* ×の2本線 */
#menuToggle .xwrap::before,
#menuToggle .xwrap::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 2px; /* お好みで */
  background: currentColor;
  border-radius: 1px;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}

/* 交差（中心固定） */
#menuToggle .xwrap::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#menuToggle .xwrap::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* メニューが開いたら×を出す */
#menuToggle.is-open .xwrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 閉じる演出中：×は少し下へ下がりながらフェードアウト */
#menuToggle.is-closing .xwrap {
  transform: translateY(8px); /* 下げ量はお好みで */
  opacity: 0;
  animation: xSlideDown 1700ms cubic-bezier(0.22, 1, 0.36, 1) both,
    /* ゆっくり移動（距離20px/700ms） */ xFadeOut 360ms linear 220ms both;
}

/**Special*****/
.special-menu {
  position: relative;
  margin-bottom: 20px;
}
/* sup */
.menu-sup {
  position: absolute;
  right: 3px;
  top: -0.4rem;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: bold;
  color: #ea2110;
  z-index: 2;
}

.menu-list .special-menu a::before {
  background: #ea2110;
}

/* layout for special menu link (text + icon) */
.menu-list .special-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  color: #fff; /* keep link text white */
  transition: color 0.3s ease 0.3s;
}

/* single text span, animate opacity on hover */
.menu-list .special-menu a .text {
  position: relative;
  z-index: 1;
  opacity: 1;
}

/* keyframes: show -> hide while band grows -> show again */
@keyframes specialTextReappear {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* trigger the animation only on hover/expanded */
.menu-list .special-menu a:hover .text,
.menu-list .special-menu a[aria-expanded='true'] .text {
  animation: specialTextReappear 0.7s ease forwards;
}

/* keep parent link color white on hover / expanded so it doesn't go black */
.menu-list .special-menu a:hover,
.menu-list .special-menu a[aria-expanded='true'] {
  color: #000;
}

/* icon color behavior */
.icon-link_menu {
  stroke: #fff;
  fill: #000;
  opacity: 1; /* normally visible */
  transition: fill 0.3s ease 0.25s, stroke 0.3s ease 0.25s;
}

.menu-list .special-menu a:hover .icon-link_menu,
.menu-list .special-menu a[aria-expanded='true'] .icon-link_menu {
  fill: #ea2110;
  stroke: #000;
  animation: specialTextReappear 0.7s ease forwards; /* hide → show same timing as text */
}
@media (max-width: 960px) {
  .menu-list .special-menu a .text {
    white-space: nowrap;
    font-size: clamp(17px, 4.9vw, 20px);
    letter-spacing: 0.07em;
  }
}