/* ===== Top page slider right side ===== */
body.home .site-header {
  position: relative;
  overflow: hidden;
  height: 700px; /* トップページ専用の高さ */
}

body.home .hero-slider {
  position: absolute;
  top: 50%;
  right: 5%;                 /* 右端から少し余白 */
  transform: translateY(-50%);
  width: 40%;                /* ヘッダー横幅の40% */
  height: 70%;               /* ヘッダー高さの70% */
  z-index: 0;
  pointer-events: none;
  margin-bottom: 400px;
}

body.home .hero-slide {
  position: absolute;
  inset: 0;
  /* width: 100%;
  height: 100%; */
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;         /* 角丸にしたい場合 */
  opacity: 0;
  animation: heroFade 25s infinite ease-in-out;
  will-change: opacity;
}

body.home .hero-slide:nth-child(1) { animation-delay: 0s; }
body.home .hero-slide:nth-child(2) { animation-delay: 5s; }
body.home .hero-slide:nth-child(3) { animation-delay: 10s; }
body.home .hero-slide:nth-child(4) { animation-delay: 15s; }
body.home .hero-slide:nth-child(5) { animation-delay: 20s; }

@keyframes heroFade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 前面に出す要素 */
.lab-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1.4rem;
  /* font-family: 'Montserrat','Noto Sans JP',sans-serif; */
  font-family: 'Roboto Slab', serif;
  margin: 0;
  z-index: 25;
}
.lab-logo a { color: #333; text-decoration: none; }
.lab-logo a:hover { text-decoration: none; }

.p-hamburger,
.site-header .hero-copy {
  position: relative;
  z-index: 30;
}


/* モバイル用スライダー調整 */
@media (max-width: 640px) {
  body.home .site-header {
    height: 800px;  /* モバイル用にヘッダー高さを増加 */
  }

  body.home .hero-slider {
    top: 82%;   /* ヘッダー文字の下にスライダーを配置 */
    width: 80%;  /* モバイル用にスライダーの幅を縮小 */
    height: 30%;  /* モバイル用に高さを縮小 */
    left: 50%;  /* 左右中央に配置 */
    transform: translate(-50%, -50%);  /* 真ん中に配置 */
  }

  body.home .hero-slide {
    border-radius: 4px;  /* モバイル用に角丸を調整 */
  }
  /* スライダーを中央に配置 */
  /* body.home .hero-slider {
  position: absolute;
  top: 50%;
  left: 50%;  /* 左右中央に配置 */
  /* transform: translate(-50%, -50%);  /* 真ん中に配置 */
  /* width: 40%;                /* 横幅40% */
  /* height: 70%;               /* 高さ70% */
  /* z-index: 0;
  pointer-events: none;
  } */ 
/* --------------------------------------------- */
 body.home .hero-copy {
    position: absolute;
    top: 10%;  /* 文字を上に寄せる */
    left: 10%;
    width: 80%;  /* 文字の幅を調整 */
    z-index: 10;  /* スライダーより前に表示 */
  }

  body.home .hero-copy .title {
    font-size: 1.7rem;  /* モバイル用の文字サイズ調整 */
  }

  body.home .hero-copy .lead {
    font-size: 1rem;  /* モバイル用の文字サイズ調整 */
  }
  /* 「〇〇研究室」の文字を最上部に配置 */
.lab-logo {
  position: absolute;           /* 固定位置 */
  top: 10px;                 /* 上部に配置 */
  left: 20px;                /* 左端に配置 */
  font-size: 1.4rem;
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif; */
  font-family: 'Roboto Slab', serif !important; /* ここに !important を追加 */
  margin: 0;
  z-index: 10;               /* スライダーの上に表示 */
}
}
/* パソコンのトップページのみで改行を反映 */
@media (min-width: 641px) {
  .lead {
    white-space: pre-line; /* 改行を反映 */
    line-height: 1.0; /* 行間を狭くする */
  }
}
/* 左上の「〇〇研究室」リンク */
.lab-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1.0rem;
  /* font-family: 'Montserrat','Noto Sans JP',sans-serif; */
  font-family: 'Roboto Slab', serif !important; /* ここに !important を追加 */
  margin: 0;
  z-index: 10;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6),
  -1px -1px 4px rgba(0,0,0,0.9);  /* 左上にも影で囲む */
}
.lab-logo a { color: #fff; text-decoration: none; }
.lab-logo a:hover { text-decoration: none; }