/* サイト全体で共有するナビゲーション。
   LP（index.html / contact.html）と、記事・サービスページの両方が読む。
   LP 側は Framer 由来の固定ロゴとハンバーガーが既にあるので、そこに横並びナビを足す。
   記事側は assets/site.css のヘッダーに Menu ボタンを足す。
   結果として全ページが「ロゴ + 横並びナビ + メニュー」で揃う。 */

/* ---------- メニュー ----------
   Framer のドロワーはランタイムが開閉していたので、剥がすと開かなくなる。
   中身を自前で持つ形に置き換えた。こうすると Blog と Services を
   ナビに足せる（Framer のままだと構造を変えられなかった）。 */

.nue-drawer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #141414;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 6vw, 6rem) 4rem;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  letter-spacing: .04em;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nue-drawer.is-open { opacity: 1; visibility: visible; }

.nue-drawer-label {
  margin: 0 0 2rem;
  font-family: 'Chakra Petch', sans-serif;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .3);
}

.nue-drawer nav { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); }

.nue-drawer a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  color: #fff;
  text-decoration: none;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.2;
  letter-spacing: .04em;
  transition: opacity .2s;
}
.nue-drawer a:hover { opacity: .55; }
.nue-drawer a span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .5);
}

.nue-drawer-foot {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .75rem;
  color: rgba(255, 255, 255, .3);
  line-height: 1.9;
}

/* ハンバーガーはドロワーより前に出す。開いている間は×印にする。
   Framer 側が mix-blend-mode: difference を掛けていて、これ自体が
   重ね合わせの文脈を作る。z-index:9999 を素で当ててもドロワー（9998）の
   下に沈み、**×を押しても閉じられない**状態だった。
   開いている間だけ blend を外し、文脈の外で前に出す。 */
[data-framer-name="Phone menu"] { z-index: 9999; }
.nue-menu-open [data-framer-name="Phone menu"] {
  mix-blend-mode: normal;
  z-index: 10000;
}
/* blend を外すと、白い四角と黒い線がそのまま出る。
   ドロワーは #141414 なので、四角を消して線を白にする */
.nue-menu-open [data-framer-name="Phone menu"] [data-framer-name="Vector 70"] { opacity: 0; }
.nue-menu-open [data-framer-name="Phone menu"] [data-framer-name="Top"],
.nue-menu-open [data-framer-name="Phone menu"] [data-framer-name="Bottom"] { background: #fff; }
.nue-menu-open [data-framer-name="Phone menu"] [data-framer-name="Top"] { transform: translateY(4px) rotate(45deg); }
.nue-menu-open [data-framer-name="Phone menu"] [data-framer-name="Bottom"] { transform: translateY(-4px) rotate(-45deg); }
[data-framer-name="Top"], [data-framer-name="Bottom"] { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }

/* 開いている間は背後をスクロールさせない */
.nue-menu-open body { overflow: hidden; }

/* ---------- LP のロゴを記事側に合わせる ----------
   Framer の LP はロゴが 182x62（モバイル 139x48）で、記事・サービスページの
   68x23（モバイル 54x18）の約2.7倍あった。左位置も 20px 固定で、
   記事側の gutter（1440px で88px）と揃っていない。
   ページを移動するとロゴが飛ぶので、記事側の実測値に合わせる。

   横位置は LP 自身のコンテンツ端に合わせる（hero のテキストが左40px、モバイル24px）。
   記事側の 88px は max-width 84rem のコンテナから出る値で、LP は全幅レイアウトなので
   そこに合わせると hero のテキストに重なる。ページごとに自分の本文と揃える。
   縦位置は記事側のロゴの実測に合わせてある。 */

.framer-17uh9x1-container {
  width: 68px !important;
  height: 23px !important;
  top: 27px !important;
  left: 40px !important;
}

@media (max-width: 47.99rem) {
  .framer-17uh9x1-container {
    width: 54px !important;
    height: 18px !important;
    top: 24px !important;
    left: 24px !important;
  }
}

/* ---------- LP に足す横並びナビ ----------
   LP のロゴは左上に fixed（framer-17uh9x1-container、182x62@20,23）、
   ハンバーガーは右上に fixed（88x88）。そのあいだに置く。 */

.lp-nav {
  position: fixed;
  top: 0;
  /* ロゴと同じく LP のコンテンツ端に合わせる（左右対称に40px、モバイル24px） */
  right: 0;
  padding-right: 40px;
  /* ロゴの中心（top:27px + 23px/2 ≒ 39px）に合わせる */
  height: 78px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif;
  font-size: .8125rem;
  letter-spacing: .04em;
}

/* LP のナビは hero のグラデーションの上に載る。
   記事側と同じ rgba(0,0,0,.5) だと、ピンクの上でほぼ読めなかった。
   LP のワードマークが黒ベタなので、そちらに合わせて濃くする。
   項目・位置・書体は記事側と同じ。 */
.lp-nav a {
  color: #000;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.lp-nav a:hover { opacity: .55; }
.lp-nav a[aria-current='page'] { border-bottom-color: #000; }

/* About セクションを通過中は背景が暗転するので、文字色を反転させる */
.nue-on-dark .lp-nav a { color: #fff; }
.nue-on-dark .lp-nav a[aria-current='page'] { border-bottom-color: #fff; }

/* 画面が狭いときは畳む。メニューボタンとドロワーが受け持つ */
@media (max-width: 63.99rem) {
  .lp-nav { display: none; }
}

@media (max-width: 47.99rem) {
  .lp-nav { padding-right: 24px; }
}

/* 1024px 以上ではドロワーを使わない。横並びナビだけで足りるので、
   メニューボタン（記事側）とハンバーガー（LP 側）ごと隠す。
   両方出すと同じ導線が二重になる。 */
@media (min-width: 64rem) {
  .site-menu,
  [data-framer-name="Phone menu"],
  .nue-drawer { display: none !important; }
}

/* ---------- 記事・サービスページの Menu ボタン ---------- */

/* LP のハンバーガーと同じ見た目にする。
   以前は「Menu」の文字 + 細い2本線（66x30、右上から 20px 内側、ink-50）で、
   LP の黒い角落としの正方形（58x58、右上から 15px、白い2本線）と別物だった。
   同じサイトで、トップだけボタンが違って見える状態だった。

   LP 側の実測値:
     当たり判定 88x88 / 見えている四角 58x58 / 右上から 15px
     線 20x1px、間隔 6px、四角の中央
     左下の角が落ちている（元は 135x58 の SVG で 6.75 / 6.824 ぶんの切り欠き） */
.site-menu {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  appearance: none;
  width: 58px;
  height: 58px;
  padding: 0;
  margin: 0;
  border: 0;
  background: #141414;
  /* 左下の角を落とす。比率は LP の SVG から */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 88%);
  color: #fff;
  /* 「Menu」の文字は出さない。aria-label があるので読み上げには残る */
  font-size: 0;
  cursor: pointer;
  /* grid にすると「Menu」の空テキストが1行ぶんの grid item になり、
     線が下にずれる。flex なら幅0の item として潰れる */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}

/* 開いている間はドロワー（#141414）と同色になって四角が消えるので、
   地を抜いて白い×だけ残す */
.nue-menu-open .site-menu { background: transparent; }

/* site.css の `body > * { position: relative; z-index: 1 }` で .site-header が
   重ね合わせの文脈を作るため、その中の z-index はいくつ積んでもドロワー
   （body 直下の 9998）を越えられない。開いている間だけ文脈を解いて、
   .site-menu の 9999 をルート側で効かせる。
   ロゴは z-index が素の値に戻るので、ドロワーの下に隠れる。 */
.nue-menu-open .site-header { z-index: auto; }

.site-menu-bars {
  display: inline-grid;
  gap: 6px;
  width: 20px;
}
.site-menu-bars::before,
.site-menu-bars::after {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nue-menu-open .site-menu-bars::before { transform: translateY(3.5px) rotate(45deg); }
.nue-menu-open .site-menu-bars::after { transform: translateY(-3.5px) rotate(-45deg); }