@charset "utf-8";
/* ==========================================================================
   2026/11 ボクセル博士のCTスキャン研究所へのリンク ＋ モバイルのヘッダー改修
   （assets/navmenu.html / navmenu_en.html から読み込み）
   ========================================================================== */

/* ---------- PC：左メニュー最下部のバナー ---------- */
.lower-nav .ctlab-bnr-lg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  margin: 0;
}
.lower-nav .ctlab-bnr-lg a {
  display: block;
  transition: opacity .3s ease;
}
.lower-nav .ctlab-bnr-lg a:hover {
  opacity: .85;
}
.lower-nav .ctlab-bnr-lg img {
  display: block;
  width: 100%;
  height: auto;
  filter: none !important;
}
.lower-nav .homelink .homelink-sp {
  display: none;
}

/* モバイル専用の要素は PC では出さない */
.ctlab-fab,
.ctz-menubar {
  display: none;
}

/* ==========================================================================
   モバイル（800px 以下）
   ========================================================================== */
@media screen and (max-width: 800px) {

  /* ---------- ヘッダー：左にロゴ、右に「生物一覧」「CTスキャンとは」 ---------- */
  .lower-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 12.6vw;
    padding: 0 2.4vw 0 3.2vw;
  }
  .lower-nav .homelink {
    display: block !important;
    width: 29.5vw;
    margin: 0;
  }
  .lower-nav .homelink a {
    display: block;
  }
  .lower-nav .homelink .homelink-pc {
    display: none;
  }
  .lower-nav .homelink .homelink-sp {
    display: block;
    width: 100%;
    height: auto;
  }
  .lower-nav ul.main {
    width: auto;
    margin: 0;
    gap: 4vw;
  }
  /* TOP はロゴから戻れるので、モバイルでは非表示 */
  .lower-nav ul.main li.is-top {
    display: none;
  }
  .lower-nav ul.main li {
    width: 8vw;
  }
  .lower-nav .ctlab-bnr-lg {
    display: none;
  }

  /* ---------- メニューを開いたとき：ヘッダーの下にタイトルバー＋閉じる ---------- */
  .ctz-menubar {
    position: fixed;
    top: 12.6vw;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 10vw;
    background: #000;
  }
  .ctz-menubar.is-open {
    display: block;
  }
  .ctz-menubar__title {
    margin: 0;
    color: #fff;
    font-size: 3.4vw;
    font-weight: 800;
    line-height: 10vw;
    text-align: center;
    letter-spacing: .04em;
  }
  #js-close-menu,
  .menu-contents #js-close-menu {
    top: 12.6vw;
    right: 0;
    width: 10vw;
    height: 10vw;
    aspect-ratio: auto;
    background-size: 4vw 4vw;
  }
  .menu-contents .menu-contents-inner {
    padding-top: 26vw;
  }

  /* ---------- 研究所バナー：最初は丸、スクロールすると右端のタブに ---------- */
  .ctlab-fab {
    display: block;
    position: fixed;
    right: 0;
    bottom: 6vw;
    z-index: 80;
    width: 26vw;
    height: 40vw;
    pointer-events: none;
  }
  .ctlab-fab a {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .ctlab-fab img {
    display: block;
    width: 100%;
    height: auto;
  }
  .ctlab-fab__circle {
    right: 2.4vw !important;
    width: 22vw;
    transform-origin: 100% 100%;
    transition: transform .35s ease, opacity .25s ease;
  }
  .ctlab-fab__tab {
    width: 6.4vw;
    transform: translateX(110%);
    transition: transform .35s ease .1s;
  }
  .ctlab-fab.is-compact .ctlab-fab__circle {
    transform: scale(.3);
    opacity: 0;
    pointer-events: none;
  }
  .ctlab-fab.is-compact .ctlab-fab__tab {
    transform: translateX(0);
  }

  /* 下層ページは最初からタブ（アニメーションなし） */
  .ctlab-fab.is-instant .ctlab-fab__circle,
  .ctlab-fab.is-instant .ctlab-fab__tab {
    transition: none;
  }

  /* ---------- トップページ：Produced by JMC は画面の一番下へ ---------- */
  html.ctz-top .homebox {
    display: block !important;
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 85;
    width: 100%;
    height: 5.2vw;
    padding: 0;
    background: #000;
    text-align: center;
  }
  html.ctz-top .homebox a {
    display: inline-block;
    width: 31vw;
    margin-top: .6vw;
  }
  html.ctz-top .homebox a img {
    width: 100% !important;
    height: auto;
  }
  html.ctz-top .ctlab-fab {
    bottom: 7.2vw;
  }

  /* メニューを開いている間は研究所バナーと Produced by を隠す */
  html.ctz-menu-open .ctlab-fab,
  html.ctz-menu-open.ctz-top .homebox {
    display: none !important;
  }
}