/* =========================================================
   phenix 全ページ共通 モバイル／タブレットナビゲーション
   トップ（index.html は自前の <style> を持つ）と下層（lower.css）の
   どちらからも使えるよう、ヘッダー本体には手を入れず追加だけで成立させる。

   切り替え幅 768px の根拠：
   実測でヘッダーの必要幅は 768px 時点で 620px、余裕 148px あり
   横並びナビがまだ収まる。タブレット縦（768）は通常ナビのまま出し、
   767px 以下（スマートフォン）だけドロワーへ切り替える。

   モーションは lower.css の方針に合わせ、移動（translate）を使わず
   opacity + blur の合焦型で開く。
   ========================================================= */

/* ---------------------------------------------------------
   ハンバーガーボタン
   768px 以上では存在ごと消す
   --------------------------------------------------------- */
.nav-toggle {
  display: none;
  position: relative;
  /* ヘッダー自身が z-index:100 で重ね合わせ文脈を作るため、ここでの指定は
     ヘッダー内での前後関係にしか効かない。ドロワーより前に出す役目は
     ヘッダー側の z-index が担う（.drawer は 90 に置いてヘッダーの下に敷く）。 */
  width: 44px; height: 44px;   /* タップ領域は44px角を確保する */
  margin-right: -10px;          /* 見た目の右端を他要素と揃える */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1px;
  background: var(--text-hi, #ece7de);
  transition: transform 0.45s var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
              opacity 0.25s ease,
              top 0.3s var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }

/* 開いている間は × に組み替える */
.nav-toggle.is-open span { background: var(--brass, #c0a468); }
.nav-toggle.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------------------------------------------------------
   ドロワー本体
   ヘッダー（z-index:100）の「下」に敷く。上に重ねると閉じる×ボタンごと
   覆ってしまい、開いたら閉じられなくなるため。
   本文（最大 z-index:3）より上、トップのオープニング（300）より下。
   --------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--pad-x, 20px) 40px;
  background: rgba(18, 16, 14, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out, cubic-bezier(0.22,1,0.36,1)), visibility 0.5s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { opacity: 1; visibility: visible; }

.drawer-nav { display: flex; flex-direction: column; }

.drawer-nav a {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: clamp(18px, 4.4vw, 26px) 0;
  border-bottom: 1px solid var(--line, rgba(236,231,222,0.14));
  font-family: var(--font-min, 'Shippori Mincho', serif);
  font-weight: 500;
  font-size: clamp(19px, 5.6vw, 24px);
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--text-hi, #ece7de);
  /* 合焦型で1項目ずつ現れる。開いた後に JS が .is-in を付ける */
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.7s var(--ease-reveal, cubic-bezier(0.165,0.84,0.44,1)),
              filter 0.7s var(--ease-reveal, cubic-bezier(0.165,0.84,0.44,1)),
              color 0.35s ease;
}
.drawer-nav a:first-child { border-top: 1px solid var(--line, rgba(236,231,222,0.14)); }
.drawer.is-open .drawer-nav a { opacity: 1; filter: blur(0); }
.drawer-nav a:active { color: var(--brass, #c0a468); }

/* 英字の副題。真鍮でリズムを作る */
.drawer-nav a .en {
  font-family: var(--font-en, 'Marcellus', serif);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-soft, #a58c58);
}

/* 事業ページへの下位項目。トップの「事業内容」の内訳にあたるため、
   一段下げて小さく置き、階層を見た目で示す */
.drawer-nav a.is-sub {
  padding: clamp(12px, 3vw, 16px) 0 clamp(12px, 3vw, 16px) 1.4em;
  font-size: clamp(15px, 4.2vw, 17px);
  color: var(--text-mid, #b5aca0);
}
.drawer-nav a.is-sub::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px; height: 1px;
  background: var(--brass-soft, #a58c58);
}
.drawer-nav a { position: relative; }

/* 開くときの時間差。移動は伴わないので、順に焦点が合う見え方になる */
.drawer.is-open .drawer-nav a:nth-child(1) { transition-delay: 0.10s; }
.drawer.is-open .drawer-nav a:nth-child(2) { transition-delay: 0.15s; }
.drawer.is-open .drawer-nav a:nth-child(3) { transition-delay: 0.20s; }
.drawer.is-open .drawer-nav a:nth-child(4) { transition-delay: 0.25s; }
.drawer.is-open .drawer-nav a:nth-child(5) { transition-delay: 0.30s; }
.drawer.is-open .drawer-nav a:nth-child(6) { transition-delay: 0.35s; }

/* ドロワー内のお問い合わせボタン
   767px 以下ではヘッダーの .nav-cta を隠すため、導線をここで受ける */
.drawer-cta {
  margin-top: clamp(32px, 7vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 24px;
  border: 1px solid var(--brass, #c0a468);
  background: var(--brass, #c0a468);
  color: var(--ink-950, #12100e);
  font-size: 14px;
  letter-spacing: 0.14em;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.7s var(--ease-reveal, cubic-bezier(0.165,0.84,0.44,1)),
              filter 0.7s var(--ease-reveal, cubic-bezier(0.165,0.84,0.44,1));
}
.drawer.is-open .drawer-cta { opacity: 1; filter: blur(0); transition-delay: 0.42s; }
.drawer-foot a { color: var(--text-mid, #b5aca0); border-bottom: 1px solid var(--line, rgba(236,231,222,0.14)); }

.drawer-foot {
  margin-top: clamp(28px, 6vw, 40px);
  font-family: var(--font-en, 'Marcellus', serif);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-low, #857c70);
  text-align: center;
}

/* ---------------------------------------------------------
   切り替え
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .nav-toggle { display: block; }
  /* 横並びナビとヘッダーのCTAを引っ込め、ドロワーへ集約する。
     320px 幅ではブランド＋CTA＋ボタンが収まらず折り返すため。 */
  .gnav .nav-item,
  .gnav .nav-cta { display: none !important; }
  .gnav { gap: 0; }
}

/* 768px 以上ではドロワーを完全に無効化する。
   画面回転などで開いたまま広がった場合の取り残しを防ぐ。 */
@media (min-width: 768px) {
  .drawer { display: none; }
}

/* ---------------------------------------------------------
   モーション低減
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer-nav a,
  .drawer-cta,
  .nav-toggle span { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .drawer-nav a,
  .drawer-cta { filter: none; }
}