@charset "utf-8";
/* ==========================================================================
   ボクセル博士のCTスキャン研究所 — Layout / Shell
   構成: 375px の本文カラムを中心に、lg(1280px) 以上で
         左 80px アイコンメニュー ＋ 右 280px CTA を添える。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset / Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--c-text-body);
  font-family: var(--font-base);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Layout shell
   -------------------------------------------------------------------------- */
.l-main {
  display: flex;
  justify-content: center;
}

.l-content {
  position: relative;
  width: 100%;
  max-width: var(--w-content);
}

/* --------------------------------------------------------------------------
   footer（375 × 800 / 黒地）— Figma: 01_Components / footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-24) var(--space-48);
  background: var(--c-bk);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: center;
  width: 100%;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  color: var(--c-wt);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
  white-space: nowrap;
}

.site-footer__nav a {
  transition: opacity 0.2s ease;
}

.site-footer__nav a:hover {
  opacity: 0.6;
}

.site-footer__nav--sitemap {
  align-items: flex-start;
}

.site-footer__nav--other {
  align-items: flex-end;
}

.site-footer__supported {
  display: flex;
  gap: 38px;
  align-items: center;
  color: var(--c-wt);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
}

.site-footer__logo {
  width: 96px;
  height: 30px;
}

.site-footer__copy {
  color: #919191;
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
}

/* フッターのバナー（bnr / 327 × 88） */
.fbnr {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 327px;
  max-width: 100%;
  height: 88px;
  padding: 10px;
  border: 4px solid rgb(255 255 255 / 20%);
  transition: opacity 0.2s ease;
}

.fbnr:hover {
  opacity: 0.85;
}

.fbnr__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fbnr__label {
  position: relative;
  width: 269px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgb(0 0 0 / 50%));
}

.fbnr--insta {
  background: linear-gradient(90deg, #ececec 0%, #868686 100%);
}

.fbnr__icon {
  width: 58px;
  height: 58px;
}

.fbnr__text {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--c-wt);
  /* 2026/11: 幅のせまいスマホでバナーからはみ出さないよう、画面幅に合わせて文字を小さくする
     （バナーの幅 ＝ 画面幅 − フッターの左右余白 48px、最大 327px。アイコンと余白のぶん 96px を引いた幅に「JMC INSTAGRAM」が収まる大きさ。
     スマホには JMC Gothic が入っていないことが多く、代わりの文字は少し幅が広いため、その幅で計算している） */
  font-size: min(var(--fs-h2), calc((min(100vw - 48px, 327px) - 96px) / 8.6));
  font-weight: var(--fw-demibold);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  filter: drop-shadow(0 4px 2px rgb(0 0 0 / 10%));
}

/* --------------------------------------------------------------------------
   3. Menubar（デスクトップ左 / モバイルはドロワー内に流用）
   -------------------------------------------------------------------------- */
.menubar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--w-menubar);
  background: var(--c-wt);
}

.menubar__top {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  width: var(--w-menubar);
  min-height: 0;
  /* 2026/11 Figma 更新：ロゴを 64px に（上・左右 8px） */
  padding: var(--space-8) var(--space-8) 0;
}

.menubar__logo {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.menubar__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menubar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--w-menubar);
  transition: opacity 0.2s ease;
}

.menu-item:hover {
  opacity: 0.6;
}

.menu-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.menu-item__icon img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.menu-item__label {
  color: var(--c-text-menu);
  font-size: var(--fs-caption);
  font-weight: var(--fw-demibold);
  line-height: 20px;
  text-align: center;
  word-break: break-word;
}

.menubar__bnr {
  display: flex;
  flex: 1 0 0;
  align-items: flex-end;
  justify-content: center;
  width: var(--w-menubar);
  min-height: 0;
}

.menubar__bnr a {
  display: block;
  width: var(--w-menubar);
}

/* --------------------------------------------------------------------------
   4. CTA（デスクトップ右 / モバイルはドロワー内に流用）
   -------------------------------------------------------------------------- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 240px;
  padding: var(--space-24);
  border: 2px solid var(--c-lbl);
  border-radius: var(--radius-24);
  background: var(--c-wt);
}

.cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

.cta__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  color: var(--c-text-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
  text-align: center;
}

.cta__desc {
  color: var(--c-text-body);
  font-size: var(--fs-caption);
  line-height: 16px;
  text-align: center;
}

.cta__thumb {
  width: 101px;
  height: 88px;
}

.cta__thumb img {
  width: 101px;
  height: 88px;
  object-fit: contain;
}

.cta__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  color: var(--c-text-muted);
  font-size: var(--fs-p);
  line-height: 1;
  text-align: center;
}

.cta__links a {
  transition: color 0.2s ease;
}

.cta__links a:hover {
  color: var(--c-bl-04);
}

/* --------------------------------------------------------------------------
   5. Button → components.css へ移動
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. ハンバーガー / ドロワー（lg 未満）
   -------------------------------------------------------------------------- */
/* header（375 × 88 / 背景なし・右寄せ）— Figma: 01_Components / header */
.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 88px;
}

.hamburger {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
}

.hamburger__icon {
  position: relative;
  width: 40px;
  height: 40px;
}

.hamburger__bar {
  position: absolute;
  right: 20%;
  left: 20%;
  height: 3px;
  background: var(--c-menu-icon);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger__bar:nth-child(1) {
  top: 25%;
}

.hamburger__bar:nth-child(2) {
  top: 45%;
}

.hamburger__bar:nth-child(3) {
  top: 65%;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding: 96px var(--space-24) var(--space-48);
  overflow-y: auto;
  background: var(--c-wt);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer .menubar {
  width: auto;
  padding-top: 0;
}

.drawer .menubar__top,
.drawer .menubar__bnr {
  flex: 0 0 auto;
}

.drawer .menubar__nav {
  gap: var(--space-32);
}

.drawer .menubar__bnr {
  margin-top: var(--space-32);
}

/* 本文スクロールのロック */
body.is-drawer-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. ブレイクポイント
      sm (〜767px)   : 本文カラムのみ。右上ハンバーガー → ドロワー
      md (768〜1279) : 左メニューバーを表示。ハンバーガーは消える。CTA は出さない
      lg (1280px〜)  : 上記に加えて右の CTA パネルを表示

      ※ Figma「memo/補足」の指示に準拠:
         「Mobile Content がそのまま入る／左ヘッダーを除いた画面幅の中央に配置」
         「右上メニューボタンが消えて左メニューバーが表示」
   -------------------------------------------------------------------------- */

/* sm — 固定パーツを隠す */
@media (max-width: 767.98px) {
  .l-menubar,
  .l-cta {
    display: none;
  }
}

/* 376px 以上 — 背景の研究所シーン（Figma: bg size=md / lg）
   「ctscan LP ファーストビュー実装依頼」に沿って:
   ・背景のメイン画像は拡大・縮小しない（等倍）。上揃えで、本文カラム（キャラクター）との
     位置関係を Figma と同じに保つ。中央は「左メニューを除いたメインコンテンツ領域」の中央。
     --bg-anchor は、背景画像の中で本文カラムの中心が来る x 座標（Figma の配置位置の目安）。
   ・画像の左右にできる余白は、画像の左右端の色（端から 2px 目の列）を外側へ引き延ばして埋める。
     --bg-ext-l / --bg-ext-r は js/scene-anime.js が実際の画像から作る 1px 幅の帯。
     JS が動く前・動かないときは、同じ色を近似したグラデーションを使う。
   ・画像の下にできる余白は、床の一番下の色（#b4cff2）で埋める。
   ・375px 以下のスマホは、これまでどおり Hero 内の hero-bg（bg size=sm）だけ */
@media (min-width: 376px) {
  :root {
    --bg-cl: 0px; /* 左メニューの幅（メインコンテンツ領域の左端） */
    --bg-url: url(/ctlab/img/bg-md.png?v=2026110602);
    --bg-w: 768px;
    --bg-h: 1024px;
    --bg-anchor: 384.5px;
    --bg-ext-l-fb: linear-gradient(#fafdfe 0px, #eafbff 220.5px, #e7f4fd 293.5px, #e7eefb 399.5px, #faffff 423.5px, #e7edfb 424.5px, #e7edfb 429.5px, #91b1ea 430.5px, #91b1ea 866.5px, #b4cff2 1024px);
    --bg-ext-r-fb: linear-gradient(#fbfeff 0px, #e8f9fe 210.5px, #e7f4fc 305.5px, #e7effb 398.5px, #faffff 423.5px, #e7edfb 424.5px, #e7edfb 429.5px, #91b1ea 430.5px, #91b1ea 865.5px, #a2c2ee 951.5px, #b4cff2 1024px);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    /* 上から：画像の下端2px のつなぎ／右の引き延ばし／左の引き延ばし／メイン画像（等倍）／下の余白の色
       引き延ばしは画像の端 2px にも重ねて、端の明るい線（書き出し時のふち）が見えないようにする。
       background-position の % は「箱 − 画像」の幅に対する割合なので、
       画像の左端 = 50%(箱) + 左メニュー/2 − anchor になるよう画像幅の半分を足している */
    background:
      linear-gradient(#b4cff2, #b4cff2) 0 calc(var(--bg-h) - 2px) / 100% 2px no-repeat,
      var(--bg-ext-r, var(--bg-ext-r-fb)) 100% 0 / max(0px, calc(50% - var(--bg-cl) / 2 + var(--bg-anchor) - var(--bg-w) + 2px)) var(--bg-h) no-repeat,
      var(--bg-ext-l, var(--bg-ext-l-fb)) 0 0 / max(0px, calc(50% + var(--bg-cl) / 2 - var(--bg-anchor) + 2px)) var(--bg-h) no-repeat,
      var(--bg-url) calc(50% + var(--bg-cl) / 2 + var(--bg-w) / 2 - var(--bg-anchor)) 0 / var(--bg-w) var(--bg-h) no-repeat,
      #b4cff2;
  }

  .l-main {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  :root {
    --bg-cl: var(--w-menubar);
  }
}

@media (min-width: 1280px) {
  :root {
    --bg-url: url(/ctlab/img/bg-lg.png?v=2026110602);
    --bg-w: 1280px;
    --bg-h: 720px;
    --bg-anchor: 680.5px;
    --bg-ext-l-fb: linear-gradient(#ffffff 0px, #ffffff 70.5px, #f1feff 210.5px, #e5f6ff 285.5px, #dcecfe 356.5px, #ddecff 399.5px, #e0effe 404.5px, #f8feff 422.5px, #ddecff 424.5px, #ddecff 429.5px, #91b1ea 430.5px, #91b2ea 556.5px, #a2c2ee 644.5px, #b4cff2 720px);
    --bg-ext-r-fb: linear-gradient(#ffffff 0px, #ffffff 70.5px, #f1feff 205.5px, #e7f6ff 279.5px, #dcebfe 355.5px, #ddecff 400.5px, #f8feff 422.5px, #ddecff 424.5px, #ddecff 429.5px, #91b1ea 430.5px, #91b2ea 556.5px, #a4c3ef 653.5px, #b4cff2 720px);
  }
}

/* md 以上 — 左メニューバー */
@media (min-width: 768px) {
  .l-menubar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100vh;
  }

  .l-menubar .menubar {
    height: 100%;
    /* ツールチップ（アイコンの右に出る吹き出し）がメニューの外に出られるよう、はみ出しは隠さない */
  }

  .l-menubar .menubar__top,
  .l-menubar .menubar__bnr {
    min-height: auto;
  }

  .l-menubar .menubar__nav {
    margin-block: var(--space-16);
  }

  .l-main {
    /* 左メニューの右側を基準に本文カラムを中央寄せ */
    margin-left: var(--w-menubar);
  }

  .site-header,
  .drawer {
    display: none;
  }
}

/* md のみ — CTA パネルは出さない */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .l-cta {
    display: none;
  }
}

/* lg 以上 — 右の CTA パネルを表示 */
@media (min-width: 1280px) {
  .l-cta {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start; /* 2026/10 Figma: カードは上寄せ */
    justify-content: center;
    width: var(--w-cta);
    height: 100vh;
    padding: var(--space-16);
    pointer-events: none;
  }

  .l-cta .cta {
    pointer-events: auto;
  }
}

/* ページ内リンク（例: サイドバー「キャラクター」→ TOP の CHARACTER）はなめらかにスクロール */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   2026/10 Figma 差分反映
   ========================================================================== */

/* --------------------------------------------------------------------------
   背景の装置・モニター・窓（md 以上 / js/scene-anime.js が位置を計算）
   背景（body::before）のすぐ上、本文カラムの下。
   -------------------------------------------------------------------------- */
.scene-bg {
  display: none;
}

@media (min-width: 376px) {
  .scene-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
}

.scene-part {
  position: absolute;
}

.scene-part img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

/* 窓：時間帯のコマだけ表示 */
/* Figma で縦横比を少し変えて置いている部品（nanotom・デスク）は枠いっぱいに伸ばす */
.scene-part--fill img {
  object-fit: fill;
}

.scene-part--window img {
  visibility: hidden;
}

.scene-part--window img.is-frame {
  visibility: visible;
}

/* 2コマの切り替え（.anim-flip も Hero 内で共用）
   1コマ目と2コマ目を交互に「どちらか一方だけ」表示する（重ねて見えないように）。
   --flip が1周の長さ（1コマあたりはその半分）。
     ・装置（M300 / C450 / nanotom）……40秒（20秒に1回切り替え）
     ・壁付けのモニター ………………20秒（10秒に1回切り替え＋切り替えエフェクト）
     ・デスクのランプ …………………1.6秒（点滅）
   --flip-delay をマイナスにすると、切り替えのタイミングをずらせる。 */
.scene-part--flip img + img,
.anim-flip img + img {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .scene-part--flip img:first-child,
  .anim-flip img:first-child {
    animation: anim-flip-a var(--flip, 1.2s) step-end var(--flip-delay, 0s) infinite;
  }

  .scene-part--flip img + img,
  .anim-flip img + img {
    animation: anim-flip-b var(--flip, 1.2s) step-end var(--flip-delay, 0s) infinite;
  }

  /* 壁付けモニターの切り替えエフェクト（10秒ごと）
     画面がチカッと光って走査線が流れ、映像が一瞬横にぶれる。 */
  .scene-part--monitor {
    animation: monitor-glitch calc(var(--flip, 20s) / 2) linear var(--flip-delay, 0s) infinite;
  }

  .scene-part--monitor::after {
    position: absolute;
    inset: 6% 4%;
    background:
      repeating-linear-gradient(
        180deg,
        rgb(255 255 255 / 55%) 0 1px,
        rgb(0 203 250 / 0%) 1px 3px
      ),
      linear-gradient(180deg, rgb(0 203 250 / 0%) 0%, rgb(160 240 255 / 90%) 50%, rgb(0 203 250 / 0%) 100%);
    background-size: 100% 100%, 100% 30%;
    background-repeat: no-repeat;
    content: "";
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    animation: monitor-scan calc(var(--flip, 20s) / 2) linear var(--flip-delay, 0s) infinite;
  }
}

/* 1周（10秒）のうち、切り替わる瞬間（0% と 100% の前後 約0.6秒）だけ動く */
@keyframes monitor-glitch {
  0%     { filter: brightness(1.8) contrast(1.3); transform: translateX(2px); }
  1%     { filter: brightness(1.2); transform: translateX(-2px); }
  2%     { filter: brightness(1.5) contrast(1.2); transform: translateX(1px); }
  3.5%   { filter: none; transform: none; }
  97%    { filter: none; transform: none; }
  98%    { filter: brightness(1.3); transform: translateX(-1px); }
  99%    { filter: brightness(0.6); transform: translateX(2px); }
  100%   { filter: brightness(1.8) contrast(1.3); transform: translateX(2px); }
}

@keyframes monitor-scan {
  0%     { opacity: 1; background-position: 0 0, 0 -40%; }
  4%     { opacity: 0; background-position: 0 0, 0 140%; }
  97.5%  { opacity: 0; background-position: 0 0, 0 -40%; }
  100%   { opacity: 1; background-position: 0 0, 0 -40%; }
}

@keyframes anim-flip-a {
  0%   { visibility: visible; }
  50%  { visibility: hidden; }
  100% { visibility: visible; }
}

@keyframes anim-flip-b {
  0%   { visibility: hidden; }
  50%  { visibility: visible; }
  100% { visibility: hidden; }
}

/* --------------------------------------------------------------------------
   ドロワー（Figma: menu/menu_open 1435:30591）
   白地・左右24px。ロゴ → 線 → メニュー5行 → 線 → バナー2枚 → クレジット
   -------------------------------------------------------------------------- */
.drawer {
  align-items: stretch;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-24) var(--space-48);
}

.drawer__logo {
  display: block;
  align-self: center;
  width: 211px;
}

.drawer__logo img {
  width: 100%;
  height: auto;
}

.drawer__br {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-bg-subtitle);
}

.drawer__nav {
  flex: 1 0 auto;
}

.drawer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-list {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  min-height: 80px;
  color: var(--btn-textlink-text);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
  transition: opacity 0.2s ease;
}

.menu-list:hover {
  opacity: 0.6;
}

.menu-list__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 50px;
  height: 50px;
}

.menu-list__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawer__bnr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.drawer__credit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

.drawer__supported {
  display: flex;
  gap: 38px;
  align-items: center;
  color: var(--c-text-primary);
}

.drawer__copy {
  color: #919191;
}

/* モバイルのハンバーガーメニュー（2026/11/07 Figma 更新: common/pankuzuheader 1479:3384）
   44 × 44・角丸 8px の白い四角の中に 40px のアイコン。本文カラム（375px）の右上（上 32px・右 16px）に置き、
   スクロールしても同じ場所に残り続ける（画面に固定）。
   TOP はこのボタンだけ。下層は、上のパンくずが白い帯（高さ 80px）になり、その右端にこのボタンが重なる */
.site-header {
  position: fixed;
  top: 32px;
  right: max(16px, calc(50% - var(--w-content) / 2 + 16px));
  left: auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--c-wt);
}

.hamburger {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   左メニューのツールチップ（Figma: menu/tool tip 1395:1163）
   アイコンの右に、白文字・青地の吹き出し。
   -------------------------------------------------------------------------- */
.l-menubar .menu-item {
  position: relative;
}

.l-menubar .menu-item[data-tip]::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  z-index: 1;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-16);
  background: var(--c-bl-04);
  color: var(--c-wt);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
  white-space: nowrap;
  content: attr(data-tip);
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* 吹き出しの三角 */
.l-menubar .menu-item[data-tip]::before {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 1;
  width: 8px;
  height: 14px;
  background: var(--c-bl-04);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.l-menubar .menu-item[data-tip]:hover::after,
.l-menubar .menu-item[data-tip]:hover::before,
.l-menubar .menu-item[data-tip]:focus-visible::after,
.l-menubar .menu-item[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.l-menubar .menu-item[data-tip]:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   フッターのサイトマップ（Figma: button type=footerlink）
   -------------------------------------------------------------------------- */
.site-footer__nav--sitemap a {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 40px;
  transition: color 0.2s ease;
}

.site-footer__nav--sitemap a:hover {
  color: var(--btn-footerlink-text-hover);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   背景のキャラクターアニメーション（md 768px 以上 / js/scene-anime.js）
   Figma: 04_animetion parts
   背景（body::before）のすぐ上、本文カラムの下に固定で重ねる。
   位置・大きさ・動きは JS が背景画像の拡大率に合わせて計算する。
   -------------------------------------------------------------------------- */
.scene-anime {
  display: none;
}

@media (min-width: 768px) {
  .scene-anime {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* 表示するときだけふわっと。隠すときは即座に（あんこうが2匹並ばないように） */
  .scene-anime.is-active {
    opacity: 1;
    transition: opacity 0.4s ease;
  }
}

.scene-sprite {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  will-change: transform;
}

.scene-sprite.is-on {
  visibility: visible;
}

.scene-sprite img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.scene-sprite.is-on img.is-frame {
  visibility: visible;
}

/* --------------------------------------------------------------------------
   スプラッシュ画面（Figma: sprash / スプラッシュ画面 1550:6213）
   初めて訪れたとき、または前回の閲覧から12時間以上空いたときに表示
   （<head> の小さなスクリプトが html に .is-splash を付ける）。
   青地の中央で文字のリングが回り、約2.4秒後にフェードアウト。クリックで閉じることもできる。
   画像は .is-splash のときだけ読み込まれるよう、背景画像で指定している。
   -------------------------------------------------------------------------- */
.splash {
  display: none;
}

html.is-splash .splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--c-bl-01);
  cursor: pointer;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

html.is-splash .splash.is-hide {
  opacity: 0;
  visibility: hidden;
}

html.is-splash body {
  overflow: hidden;
}

.splash__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 280px;
  height: 280px;
}

.splash__ring,
.splash__circle,
.splash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.splash__ring {
  width: 100%;
  height: 100%;
  background: url(../img/splash-ring.png) center / contain no-repeat;
}

/* sm：白い円の上にロゴ */
.splash__circle {
  width: 254px;
  height: 254px;
  border-radius: 50%;
  background: var(--c-wt);
}

.splash__logo {
  width: 174px;
  height: 88px;
  background: url(../img/splash-logo-sm.png) center / contain no-repeat;
}

/* md 以上：白い円なし、リング 400px、ロゴは SVG（md 291×151 / lg 335×174） */
@media (min-width: 768px) {
  .splash__stage {
    width: 400px;
    height: 400px;
  }

  .splash__circle {
    display: none;
  }

  .splash__logo {
    width: 291px;
    height: 151px;
    background-image: url(../img/splash-logo.svg);
  }
}

@media (min-width: 1280px) {
  .splash__logo {
    width: 335px;
    height: 174px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .splash__ring {
    animation: splash-spin 8s linear infinite;
  }

  .splash__logo {
    animation: splash-logo-in 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

@keyframes splash-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes splash-logo-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --------------------------------------------------------------------------
   装置の赤いランプ（ずっと点滅）
   用意されているランプ点灯／消灯のコマ画像をそのまま使う。
   ・C450・nanotom（Hero）・デスク … 2コマの違いがランプだけなので、コマの切り替えで点滅
   ・M300 … 2コマ目はモニターの表示も変わるので、ランプの部分だけを切り抜いて重ね、
            モニター（20秒ごと）とは別に点滅させる（--lamp-clip で切り抜き範囲を指定）
   -------------------------------------------------------------------------- */
.scene-part--lampclip img {
  clip-path: var(--lamp-clip);
}

/* 背の低いウィンドウ（〜559px）では、項目と下のバナーが重ならないようバナーを隠す
   （以前はメニューの中をスクロールさせていたが、それだとツールチップが切れて見えなかった） */
@media (min-width: 768px) and (max-height: 559.98px) {
  .l-menubar .menubar__bnr {
    display: none;
  }
}

/* モバイルの下層ページ：上のパンくずを白い帯にする（Figma: common/pankuzuheader page=2 / page=3）
   高さ 80px（上 32px・下 4px・左右 16px）。右端の 44px はメニューボタン（画面に固定）が重なるのであけておく。
   2026/11/07: 帯ごと画面の上に固定（スクロールしても付いてくる）。メニューを開いたときはドロワー（z-index 20）の下になる */
@media (max-width: 767.98px) {
  .site-header + .pankuzu {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 32px calc(16px + 44px + 10px) 4px 16px;
    background: var(--c-wt);
  }

  /* iPhone の Safari では、画面のいちばん上（時計などの表示の裏）にもページが描かれるため、
     固定した帯の上にすき間ができて、スクロールした中身が透けて見える。帯の上にも白をのばしてふさぐ */
  .site-header + .pankuzu::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 120px;
    background: var(--c-wt);
    content: "";
  }

  /* ページ内リンクで移動したとき、見出しが固定の帯の下にかくれないように */
  html:has(.site-header + .pankuzu) {
    scroll-padding-top: 80px;
  }

  .site-header + .pankuzu .pankuzu__list {
    min-height: 44px;
  }

  /* 家のアイコンは 20px の枠いっぱいに（中の絵が 15px）、区切りの矢印はグレー */
  .site-header + .pankuzu .pankuzu__home img {
    width: 20px;
    height: 20px;
  }

  .site-header + .pankuzu .pankuzu__sep {
    color: #aaa;
  }
}

/* ドロワーを閉じる × ボタン（js/main.js がドロワーの中に作る）
   右上のメニューボタンと同じ場所・同じ大きさ。376〜767px では本文（.l-main）が重なり順のまとまりを作るため、
   本文の中にあるメニューボタンがドロワーの下にかくれてしまう。そのためドロワー側にも同じボタンを置く */
.drawer__close {
  position: fixed;
  top: 32px;
  right: max(16px, calc(50% - var(--w-content) / 2 + 16px));
  z-index: 1;
  background: var(--c-wt);
}


/* モバイル（〜767px）は、本文を画面の幅いっぱいに広げる（左右に背景の余白を出さない。2026/11/07）
   375px より広いスマホでも、各セクションの背景が画面の端まで届く。メニューボタンは画面の右から 16px */
@media (max-width: 767.98px) {
  .l-content {
    max-width: none;
  }

  .site-header,
  .drawer__close {
    right: 16px;
  }
}

/* トップページのメニューボタンは、画面の右端寄り（右 12px）に置く（2026/11/07） */
@media (max-width: 767.98px) {
  .site-header--top,
  body:has(.site-header--top) .drawer__close {
    right: 12px;
  }
}

/* 2026/11/07: サイトマップのリンクの左右の余白（10px）をなくし、文字の左端をバナーの左端にそろえる */
.site-footer__nav--sitemap a {
  padding: 0;
}

/* 2026/11/07: スマホでは、フッターのバナー（CT生物図鑑・JMC INSTAGRAM）をリンクの文字と同じ幅（左右の余白 24px の内側いっぱい）まで広げる */
@media (max-width: 767.98px) {
  .fbnr {
    width: 100%;
  }

  .fbnr__text {
    /* 2026/11/10: 端に余裕を持たせる（JMC Gothic が読み込まれた端末でも、右端に 1文字ぶん以上のすき間が残る大きさ） */
    font-size: min(26px, calc((100vw - 48px - 96px) / 10.2));
    white-space: nowrap;
  }
}

/* 2026/11/10: Privacy Policy は「Presented by JMC」とコピーライトのあいだに、小さめの文字で中央に置く */
.site-footer__nav--other {
  align-items: center;
  margin: -14px 0 -26px;
  font-size: 14px;
  font-weight: var(--fw-regular);
}

/* 2026/11/10: フッター下部（Presented by JMC ／ Privacy Policy ／ コピーライト）をひとまとまりに整える
   ・Presented by とロゴの間を詰め、文字はロゴの高さに合わせて少し小さく
   ・Privacy Policy とコピーライトは近づけて、どちらも細い文字・中央ぞろえ
   ・コピーライトは1行に収まる大きさに（行間も詰める） */
.site-footer__supported {
  gap: 14px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.site-footer__logo {
  width: 84px;
  height: 26px;
}

.site-footer__nav--other {
  margin: -12px 0 -28px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.site-footer__nav--other a {
  color: #d6d6d6;
}

.site-footer__copy,
.drawer__copy {
  color: #8a8a8a;
  font-size: 11px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
}

/* 2026/11/10: スマホでページの一番下を引っぱったとき（iPhone のバウンド）に、フッターの下に白い余白が見えないようにする
   ・ページ全体の地の色を黒にして、本文（body）は白のまま
   ・iPhone のホームバーの部分もフッターの黒が続くようにする */
@media (max-width: 767.98px) {
  html {
    background-color: #000;
  }

  .site-footer {
    padding-bottom: calc(var(--space-48) + env(safe-area-inset-bottom, 0px));
  }
}