/* =========================================================
   style.css — 共通スタイル
   全ページ共通のリセット・ベース・ブランドロゴ・MENUドロワー。
   ページ固有のレイアウトは各ページのCSS（top.css / contact.css）に置く。
   ※ index.html のデザインベースから移設。値は一切変更していない。
========================================================= */

/* Webフォント JetBrains Mono は各HTMLの <head> で Google Fonts から読み込む
   （SIL Open Font License 1.1）。ここでは font-family での参照のみ行う。 */

/* リセット: 全要素のマージン・パディングを排除し box-sizing を統一 */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ページ全体: スクロールを無効化し、全コンテンツをビューポート内に収める */
html, body {
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  /* 本文フォントは Noto Sans JP に固定（OS標準フォントへの依存を排除）。
     読み込み前・失敗時の保険として sans-serif をフォールバックに残す。 */
  font-family: "Noto Sans JP", sans-serif;
}

/* 屋号ロゴ: 左上に固定表示する黒背景・白文字のブランド名 */
.brand-logo {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 100;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: #000;
  color: #fff;
  padding: 6px 14px;
  pointer-events: none;
}

/* =========================================================
   巨大な赤スラブ MENU（右下固定・全ページ共通ナビゲーション）
========================================================= */
.bottom-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 240px;
  height: 65px;
  background: #f04343; /* 最初の赤を復元 */
  z-index: 9999;
  cursor: pointer;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* PCホバー時：下から赤一面に突き抜ける */
.bottom-drawer:hover {
  height: 100dvh;
}

.menu-trigger {
  height: 65px;
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: #000;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 1px;
  user-select: none;
}
.icon-bars { display: flex; flex-direction: column; gap: 4px; }
.icon-bars span { display: block; width: 22px; height: 3px; background: #000; }

.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 60px 24px 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bottom-drawer:hover .menu-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.menu-item {
  color: #fff;
  font-size: 1.35rem;
  text-decoration: none;
  font-weight: 800;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: padding-left 0.2s ease;
}
.menu-item:hover {
  padding-left: 8px;
}
/* アクティブ（現在表示中のページ）: 背景を濃い赤にして他リンクと区別する（要件3.5）。
   ドロワーの左右padding(24px)ぶん背景を広げ、文字位置は保ったまま帯を端まで伸ばす。 */
.menu-item.active {
  background: rgba(0, 0, 0, 0.2);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* =========================================================
   スマホ対応（共通要素: ブランドロゴ・MENUドロワー）
========================================================= */
@media (max-width: 768px) {
  .brand-logo {
    top: 14px;
    left: 16px;
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  .bottom-drawer {
    left: 0;
    width: 100vw;
    height: 54px;
  }
  /* スマホではホバー展開を無効化（タップで開閉するため） */
  .bottom-drawer:hover {
    height: 54px;
  }
  .bottom-drawer.open {
    height: 75dvh !important;
  }
  .bottom-drawer.open .menu-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
  }

  .menu-trigger {
    height: 54px;
    min-height: 54px;
    font-size: 1.1rem;
    padding: 0 20px;
  }
  .menu-item {
    font-size: 1.15rem;
    padding: 12px 0;
  }
}