@charset "utf-8";
    html {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; /* mainフル版と同一 */
      line-height: 1.6;
      color: #111;
      background: #000;
    }

    header {
      /* fixed でフローから外し、ヒーローをページ最上端から 100svh きっかりに
         確保する(sticky だとヘッダー高さぶんタイル下端が見切れる) */
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: transparent;
      color: #fff;
      /* 透明な全幅帯が下の操作(ミサイル演出等)を奪わないよう素通しにし、
         リンク・ハンバーガー等の操作要素だけ受け付ける */
      pointer-events: none;
    }

    header a,
    header label,
    header input {
      pointer-events: auto;
    }

.site-title {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
  padding: 0.75rem 1.0rem;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
}

.site-title a img {
  display: block;
}

/* ------------------------------
   PCレイアウト（右寄せ・2行固定）
------------------------------ */
.nav {
  padding: 0.3rem 0.5rem;
  background: transparent;


}

.nav-links {
  display: grid;
  grid-template-columns: repeat(3, auto); /* ✅ 3列 × 2行で強制2行 */
  justify-content: end; /* ✅ 右寄せ */
  gap: 0.3rem 0.5rem;
}

.nav-links a {
  color: #ddd;
  border-bottom: none !important;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);

  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  
  transition: background 0.2s ease;
}

.nav-links a:hover {
  background: #444;
  color: #fff;
}

/* 「トップ」はスマホのハンバーガーメニュー内だけに表示(PCナビには出さない) */
.nav-top-only {
  display: none;
}

a img {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}


/* ------------------------------
   ハンバーガー（スマホ）
------------------------------ */
.nav-toggle,
.nav-toggle-label,
.nav-backdrop {
  display: none;
}

.nav-toggle-label,
.nav-links {
  z-index: 1;
}
a img {
  position: relative;
  z-index: 2; /* 9999 じゃなくて十分 */
}


@media (max-width: 768px) {




  .nav {
    position: relative; /* ← これが基準になる */
  }

  .nav-links {
    position: absolute;   /* ← フローから外す */
    top: calc(1rem + 24px + 0.75rem); /* ← ×印(top:1rem+高さ24px)の下に出して重なりを防ぐ */
    right: 1.5rem;        /* ← 右寄せ */
    background: rgba(0,0,0,0.85); /* ← 背景つけると見やすい */
    padding: 0.5rem 1rem;
    border-radius: 6px;

    display: none;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    animation: fadeOut 0.3s forwards;
  }

  .nav-toggle:checked ~ .nav-links {
    display: flex;
    animation: fadeIn 0.3s forwards;
  }

  /* メニュー展開中は画面全体を透明レイヤーで覆い、
     メニュー外のどこをタップしても閉じるようにする */
  .nav-toggle:checked ~ .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0; /* メニュー(z-index:1)と×印より下 */
    background: transparent;
  }


  /* ハンバーガー表示 */
  .nav-toggle-label {
    display: block;
    width: 32px;
    height: 24px;
    cursor: pointer;
    /* position: relative; */
    position: absolute;  /* ← nav の中で絶対配置 */
    right: 1.5rem;       /* ← 右寄せ */
    top: 1rem;           /* ← 上の余白はお好みで調整 */

  }

  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: #fff;
    left: 0;
    transition: 0.3s;
  }

  .nav-toggle-label span {
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-toggle-label span::before {
    top: -8px;
  }

  .nav-toggle-label span::after {
    top: 8px;
  }

  /* ハンバーガーONで×に変形 */
  .nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }
  .nav-toggle:checked + .nav-toggle-label span::before {
    top: 0;
    transform: rotate(45deg);
  }
  .nav-toggle:checked + .nav-toggle-label span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* ▼ スマホ時のメニュー（フェード付き） */
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: 1rem;
    opacity: 0;
    animation: fadeOut 0.3s forwards;
  }

  .nav-toggle:checked ~ .nav-links {
    display: flex;
    animation: fadeIn 0.3s forwards;
  }

  .nav-links a {
    padding: 0.75rem 0;
    border-bottom: none !important;


  }

  /* スマホのハンバーガーメニューでは「トップ」を先頭に表示 */
  .nav-top-only {
    display: block;
  }
}

/* ------------------------------
   フェードアニメーション
------------------------------ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-5px); }
}



    main {
      background: #000;
      color: #f5f5f5;
    }


/* 画像グリッド 共通設定 */
.top-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ▼ スマホ（デフォルト）2列 × 3行 */
.top-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* グリッド内のセル（リンク） */
 .top-grid .img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  
  display: block; /* a要素でもOKにする */
} 

/* ▼ 1行目（1番目・2番目）＝正方形 */
.top-grid .img-wrap:nth-child(1),
.top-grid .img-wrap:nth-child(2) {
  aspect-ratio: 1 / 1;
}

/* ▼ 2行目（3番目・4番目）＝横長 */
.top-grid .img-wrap:nth-child(3),
.top-grid .img-wrap:nth-child(4) {
  aspect-ratio: 16 / 9; /* ← 好きな比率に変更OK */
}

/* ▼ 3行目（5番目・6番目）＝横長 */
.top-grid .img-wrap:nth-child(5),
.top-grid .img-wrap:nth-child(6) {
  aspect-ratio: 16 / 9;
}

/* 画像を中でトリミング */
.top-grid .img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  pointer-events: none; /* クリック判定を a にだけ持たせる */
}

/* ホバーで拡大（PC時の視覚効果） */
.top-grid .img-wrap:hover img {
  transform: scale(1.15);
}

/* section-5 のタイル(rugby_ops)は元画像が暗いので明るく見せる */
.top-grid a[href="#section-5"] img {
  filter: brightness(1.5);
}

/* ▼ PC（768px以上） */
/* ▼ PC（768px以上）で 2枚 + 4枚 */
@media (min-width: 768px) {
  .top-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ✅ 1行目の2枚だけ横長にする */
  .top-grid .img-wrap:nth-child(1),
  .top-grid .img-wrap:nth-child(2) {
    grid-column: span 2;
    aspect-ratio: 16 / 9; /* ←1行目の比率 */
  }

  /* ✅ 2行目の4枚は正方形のまま */
  .top-grid .img-wrap:nth-child(3),
  .top-grid .img-wrap:nth-child(4),
  .top-grid .img-wrap:nth-child(5),
  .top-grid .img-wrap:nth-child(6) {
    aspect-ratio: 1 / 1; /* ←2行目の比率 */
  }
}

/* #top のヒーローレイアウトはファイル末尾の
   「トップ(ヒーロー): フル演出版レイアウト」ブロックで定義 */

/* 画像の共通スタイル */

img{
 pointer-events: none;
}

.img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ホバーで拡大 */
.img-wrap:hover img {
  transform: scale(1.15);
}
    
    section {
      padding: 3rem 1.5rem;
    }

    /* section:nth-of-type(odd) {
      background: #050505;
    }

    section:nth-of-type(even) {
      background: #101010;
    } */

    .section-inner {
      max-width: 960px;
      margin: 0 auto;
      display: block;
  height: auto;
  overflow: visible;
    }

    h1, h2, h3, h4 {
      margin-top: 0;
      letter-spacing: 0.1em;
    }

/* タイトル効果 */
.scatter-title {
  /* font-family: "Helvetica Neue", "Segoe UI", sans-serif; */
  /* font-weight: 300; */
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f5f5f5;
  text-align: left;
  display: block;
  line-height: 1.4;
}

/* 単語ごとに改行させる */
.scatter-title .word {
  display: inline-block;   /* 単語単位で折り返す */
  white-space: nowrap;     /* 単語の途中で折れない */
  margin-right: 0.5em;     /* 単語間のスペース */
}

/* 文字はアニメーションなしで即時表示 */
.scatter-title .word span {
  display: inline-block;
}

    .subtitle-ja {
      margin-bottom: 0.75rem;
    }

    .university-line {
      font-size: 0.9rem;
      color: #ccc;
      margin-bottom: 1.5rem;
    }

    .scroll-note {
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #888;
    }

    .section-title {
      font-size: 1.4rem;
      margin-bottom: 1.5rem;
      border-bottom: 1px solid #444;
      padding-bottom: 0.25rem;
    }

    .images-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1rem;
    }

/*セクションの基本レイアウト*/

.images-row img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  flex: 1 1 120px;
}

/* =========================
   スライドショー枠
========================= */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
}

/* =========================
   全画像 共通
========================= */
.slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;

  animation-name: fadeInOnce;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* =========================
   順番フェードイン（3秒間隔）
========================= */
.slideshow img:nth-child(1)  { animation-delay: 0s; }
.slideshow img:nth-child(2)  { animation-delay: 3s; }
.slideshow img:nth-child(3)  { animation-delay: 6s; }
.slideshow img:nth-child(4)  { animation-delay: 9s; }
.slideshow img:nth-child(5)  { animation-delay: 12s; }
.slideshow img:nth-child(6)  { animation-delay: 15s; }
.slideshow img:nth-child(7)  { animation-delay: 18s; }
.slideshow img:nth-child(8)  { animation-delay: 21s; }
.slideshow img:nth-child(9)  { animation-delay: 24s; }
.slideshow img:nth-child(10) { animation-delay: 27s; }
.slideshow img:nth-child(11) { animation-delay: 30s; }
.slideshow img:nth-child(12) { animation-delay: 33s; }
.slideshow img:nth-child(13) { animation-delay: 36s; }

/* =========================
   13枚目：円が広がる演出
========================= */
.slideshow img:nth-child(13) {
  animation-name: fadeInOnce, revealCircle;
  animation-duration: 3s, 10s;
  animation-delay: 36s, 36s;
  animation-fill-mode: forwards, forwards;
  animation-timing-function:
    ease,
    cubic-bezier(0.12, 0.01, 0.08, 1);

  /* マスクは固定 */
  -webkit-mask-image: radial-gradient(circle at 30% 40%
, black 40%, transparent 41%);
  mask-image: radial-gradient(circle at 30% 40%
, black 40%, transparent 41%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  /* ここをアニメーションする */
  -webkit-mask-size: 10% 10%;
  mask-size: 10% 10%;
}

/* =========================
   フェードイン
========================= */
@keyframes fadeInOnce {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================
   円がじわっと広がる
========================= */
@keyframes revealCircle {
  from {
    -webkit-mask-size: 10% 10%;
    mask-size: 10% 10%;
  }
  to {
    -webkit-mask-size: 250% 250%;
    mask-size: 250% 250%;
  }
}




.fade-slider {
  position: relative;
  width: 100%;
  max-width: 600px; /* 必要に応じて調整 */
  aspect-ratio: 16/9;
  margin: 0 auto;
  overflow: hidden;
}

.fade-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 画像を歪ませない */
  opacity: 0;
  animation: fadeSlide 16s infinite;
}

/* 各画像の開始タイミング */
.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 4s; }
.fade-slider img:nth-child(3) { animation-delay: 8s; }
.fade-slider img:nth-child(4) { animation-delay: 12s; }

/* フェードアニメーション */
@keyframes fadeSlide {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ▼ 全体を2×2のグリッドに */
.topics-grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

/* スマホ：1列 */
.topics-grid {
  grid-template-columns: 1fr;
}

/* PC：2列×2行 */
@media (min-width: 768px) {
  .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ▼ h4 の下を左右2カラムにする */
.topic-inner {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

/* スマホ：縦並び */
.topic-inner {
  grid-template-columns: 1fr;
}

/* PC：左テキスト + 右画像 */
@media (min-width: 768px) {
  .topic-inner {
    grid-template-columns: 1fr 200px; /* ←右側の正方形サイズ */
  }
}

/* ▼ 正方形画像枠 */
.square-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* ✅ 正方形 */
  overflow: hidden;
  border-radius: 6px;
}

/* ▼ 画像（fade-slider や images-row の中身） */
.square-wrap img,
.square-wrap .fade-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.square-wrap .fade-slider {
  position: absolute;
  inset: 0;
}

/* ✅ topics-grid 内の fade-slider を正方形に強制 */
.topic-block .fade-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1 !important; /* ← 16:9 を上書き */
  max-width: none; /* ← 600px の制限を解除 */
  margin: 0;
}

/* ✅ 画像も正方形にフィット */
.topic-block .fade-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover !important; /* contain を上書き */
  border-radius: 0;
}

/* スマホ：横長にする（7:3 ≒ 2.33:1） */
@media (max-width: 767px) {
  .square-wrap {
    aspect-ratio: 7 / 3; /* ← 横長に変更 */
  }

  /* fade-slider も正方形を上書き */
  .topic-block .fade-slider {
    aspect-ratio: 7 / 3 !important;
  }

  .topic-block .fade-slider img {
    object-fit: cover !important;
  }
}


    .projects-list,
    .text-block {
      font-size: 0.9rem;
      white-space: normal;
    }
    li {
      list-style-type: none;
      margin: 0 0 0.75rem;
    }

    .projects-list p,
    .text-block p {
      margin: 0 0 0.75rem;
    }

    .projects-list span.year {
      font-weight: bold;
      color: #ddd;
    }

    .contact-block {
      font-size: 0.9rem;
    }

    .contact-block p {
      margin: 0.25rem 0;
    }

    footer {
      text-align: center;
      font-size: 0.75rem;
      color: #bbb;
      padding: 1.5rem;
      background: #000;
      border-top: 1px solid #333;
    }

    a {
      color: #8ec5ff;
    }

    a:hover,
    a:focus {
      color: #c0e0ff;
    }

    @media (min-width: 768px) {
      section {
        padding: 4rem 2rem;
      }

      h1 {
        font-size: 2.1rem;
      }

      .section-title {
        font-size: 1.6rem;
      }

      /* PCでは本文の最小文字サイズを約1.2倍(0.9rem→1.08rem)にする */
      .projects-list,
      .text-block,
      .contact-block {
        font-size: 1.08rem;
      }
    }



section.parallax-section {
  /* min-height: 100vh; */
  min-height: auto;
  height: auto;
  padding: 100px 50px;
  background-color: transparent !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* fixed背景は「マウス等の精密ポインタを持つ本物のPC」だけに適用する。
   iPad(タッチ主体)は幅769px以上でもここに入れない: iPadOS Safariは
   fixed背景のcoverを文書全体の高さ基準で計算するため、背景が
   異常に拡大されるバグがある(::after方式で代替する) */
@media (min-width: 769px) and (pointer: fine) {
  section.parallax-section {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  /* section.parallax-section(PC用 100px 50px)より詳細度を落とさないこと。
     以前 .parallax-section 単独指定だったため負けており、スマホでも
     左右50pxの余白が出ていた */
  section.parallax-section {
    background-attachment: scroll; /* ← iOSはfixed非対応(下の::afterで再現) */
    overflow: visible;             /* ← これが重なりを解消する */
    padding: 80px 16px;            /* ← スマホは左右の余白を詰める */
  }

  .parallax-section::before {
    height: 100%;
  }
}



/* 各背景の画像 */
.img-section-01 { background-image: url('images/pigeon.jpg');}
.img-section-02 { background-image: url('images/experiment1.jpg');}
.img-section-03 { background-image: url('images/snake_frog.jpg');}
.img-section-04 { background-image: url('images/dive.jpg');}
.img-section-05 { background-image: url('images/rugby_ops.jpg?v=20260715b');}
.img-section-06 { background-image: url('images/programming.jpg?v=20260711a');}


.parallax-section {
  position: relative;
  overflow: visible;
  z-index: 0;
}

.parallax-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* ← inset:0 より確実に高さを拾う */
  background: rgba(0,0,0,0.7); /* ← ここで暗さ調整 */
  z-index: 1; /* ← 背景の上、テキストの下 */
}
/* section-5(ゼミ/ラボ教育)の暗幕(背景の暗さ調整用) */
.parallax-section.img-section-05::before { background: rgba(0,0,0,0.62); }
.parallax-section > * {
  position: relative;
  z-index: 2;
}

/* --- スマホ/タブレットでもパララックスを再現 ---
   iOS/iPadOS Safari は background-attachment: fixed を正しく扱えないため、
   セクションを clip-path で「窓」にし、その中に position:fixed の
   背景レイヤー(::after)を置いて同じ見た目を実現する。
   タッチ主体の端末(pointer: coarse)は幅に関係なくこちらを使う(iPad対策)。
   ::after(z:-1) → 暗幕::before(z:1) → 本文(z:2) の順に重なる */
@media (max-width: 768px), (pointer: coarse) {
  .parallax-section {
    clip-path: inset(0); /* fixedレイヤーをセクション範囲に閉じ込める */
    background-image: none; /* 背景は::after側に移す(下のurl指定を上書き) */
  }

  /* セクション境界の明るい線の対策(iPadで顕在化):
     clip-path の境界と暗幕(::before)の描画境界のサブピクセル丸めがずれると、
     境界に暗幕の乗らない生の背景(明るい空)が1px弱の線として漏れる。
     暗幕を上下1pxはみ出させ(はみ出しはclip-pathが正確に切る)、
     隣接セクション自体も1px重ねてスキマを塞ぐ */
  .parallax-section::before {
    top: -1px;
    bottom: -1px;
    height: auto; /* 別ブロックの height:100% を打ち消して上下-1pxを効かせる */
  }
  .parallax-section + .parallax-section {
    margin-top: -1px;
  }

  .parallax-section::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh; /* アドレスバー最小時も下端まで覆う */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
  }

  .img-section-01::after { background-image: url('images/pigeon.jpg'); }
  .img-section-02::after { background-image: url('images/experiment1.jpg'); }
  .img-section-03::after { background-image: url('images/snake_frog.jpg'); }
  .img-section-04::after { background-image: url('images/dive.jpg'); }
  .img-section-05::after { background-image: url('images/rugby_ops.jpg?v=20260715b'); }
  .img-section-06::after { background-image: url('images/programming.jpg?v=20260711a'); }

  /* 強化版では #section-1 は高さマーカー化される(bg:none)ので
     固定背景レイヤーも出さない */
  html.enh #section-1::after {
    display: none;
  }
}




.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp linear forwards;
  animation-timeline: view();
  animation-range: entry 20% cover 30%;
}
@media (max-width: 768px) {
  .fade-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

summary {
  cursor: pointer;
  transition: 0.2s; /* 変化を滑らかに */
}

summary {
  display: list-item;
  cursor: pointer;
  list-style: disclosure-closed;
  transition: 0.2s;
}

/* 折りたたみ三角のすぐ後に見出しを続ける */
summary h3 {
  display: inline;
  margin: 0;
}

details[open] summary {
  list-style: disclosure-open;
}

summary:hover {
  background-color: rgba(196, 164, 100, 0.4); /* 薄い黄土色(白文字が読める半透明) */
}

/* 汎用2カラムレイアウト */
.two-column {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 2rem 0;
}

/* 各カラムは自然に伸びる */
.two-column .col {
  flex: 1;
}

/* ブラウザ標準の iframe 枠線(2px inset)を全面的に無効化
   (Googleマップ等の縁にグレー/白の線が出るのを防ぐ) */
iframe {
  border: 0;
}

/* 画像やiframeを綺麗に表示 */
.two-column img {
  width: 100%;
  height: auto; /* 固定300pxだと横長画像が縦に伸びる(アスペクト比維持) */
  display: block;
}
.two-column iframe {
  width: 100%;
  max-width: 100%;
  height: 300px;
  display: block;
}
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
    /* height: 120px; */
  }
  /* 縦積み時は flex:1(basis 0)だと padding-top 枠の高さが0に潰れるため解除 */
  .two-column .col {
    flex: none;
    width: 100%;
  }
  .two-column iframe {
    height: 200px;
  }
}

/* --- セクション3: YouTube独自サムネイル(クリックで再生) ---
   padding-top方式の16:9枠: aspect-ratio非対応環境でも必ず親幅に収まる */
.video-thumb {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 6px;
}
.video-thumb a {
  position: absolute;
  inset: 0;
  display: block;
}
.two-column .video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* クリック後に差し込まれる再生用iframe(汎用の高さ300px指定を上書き) */
.two-column .video-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- セクション6: Googleマップのダークモード表示 --- */
.map-dark {
  filter: invert(90%) hue-rotate(180deg);
}

/* --- セクション4: 研究室への参加の小見出し(フル版の下線＋字下げ本文) --- */
.join-heading {
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
  margin: 1.4em 0 0.4em;
}
.text-block .join-body {
  padding-left: 2em;
}
@media (max-width: 768px) {
  .text-block .join-body {
    padding-left: 1em;
  }
}

/* --- セクション4: メンバー画像のスリガラス背景(フル版の blur(12px) 準拠。
       透過PNGの背後にだけ効く。非対応ブラウザでは単に素通し) --- */
.member-glass {
  position: relative;
}
.member-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.member-glass img {
  position: relative;
  display: block;
}

/* --- セクション4: リクルート(「公募中：」に職名リストをぶら下げる) --- */
.recruit-block {
  display: flex;
  align-items: flex-start;
}
.recruit-label {
  white-space: nowrap;
  font-weight: bold;
}
.recruit-list {
  margin: 0;
  padding: 0;
}
.recruit-list li {
  list-style: none;
  margin: 0 0 0.4rem;
}

/* --- セクション5: ゼミ/ラボ教育のポンチ絵(本文が回り込む) --- */
.seminar-diagram {
  float: right;
  width: 46%;
  max-width: 460px;
  margin: 0.3rem 0 1.2rem 1.8rem;
}
.seminar-block::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 768px) {
  .seminar-diagram {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 1.2rem;
  }
}

/* --- セクション6: 交流会バナー --- */
.banner-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.contact-extra {
  margin-top: 2.5rem;
}

/* コンタクト: 代表教員名(西海 望)だけ強調(通常の約1.33倍) */
.name-big {
  font-size: 1.333em;
}

/* 代表教員の行(名前を含む)全体に下線 */
.contact-lead {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* メールアドレスの @ の代替記号(スパム避け): シアンで強調。
   縦位置はベースライン合わせ(middle だと他の文字より下がって見える) */
.at-mark {
  color: #00e5ff;
  font-weight: bold;
  font-size: 1.333em; /* 2em の 2/3 */
}

/* --- 常時表示のトップへ戻るボタン(右下固定) --- */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  text-decoration: none !important;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: background 0.2s ease;
}
.back-to-top:hover {
  background: rgba(0, 0, 0, 0.85);
}


/* ==========================================================================
   トップ(ヒーロー): フル演出版レイアウトの再現
   - タイルグリッドを全画面配置(PC: 12列×2行 / スマホ: 4列×12行)
   - 研究室名ブロックはグリッドの上に重ねて左端・上下中央に配置
   - 配色・暗さはフル版の hero-overlay-dynamic と同じグラデーション
   ========================================================================== */

/* ヘッダーは sticky で通常フローに高さを持つため、#top を負マージンで
   ページ最上端まで引き上げ、ヒーローを画面全体(100vh)にする */
#top {
  position: relative;
  height: 100vh;
  height: 100svh; /* モバイルのアドレスバー分を除いた実表示域 */
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

:root {
  --top-header-h: 80px; /* 固定ナビ(実測76px)の下からグリッド開始(フル版 top:80px と同じ) */
}

#top .section-inner {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
}

/* --- タイルグリッド: フル版と同じ 12列×2行(PC) --- */
#top .top-grid {
  position: absolute;
  top: var(--top-header-h, 96px); /* ナビの下から開始(フル版 top:80px 相当) */
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  padding: 20px;
  opacity: 1;
  z-index: 1;
}

#top .top-grid .img-wrap {
  aspect-ratio: auto; /* グリッド行がサイズを決める(共通の比率指定を打ち消し) */
  border-radius: 8px;
}

/* 写真1(pigeon)=8/12幅・写真2=4/12幅・写真3〜6=各3/12幅 */
#top .top-grid .img-wrap:nth-child(1) { grid-column: span 8; grid-row: span 1; }
#top .top-grid .img-wrap:nth-child(2) { grid-column: span 4; grid-row: span 1; }
#top .top-grid .img-wrap:nth-child(n+3) { grid-column: span 3; grid-row: span 1; }

/* --- 暗さのグラデーション(フル版 hero-overlay-dynamic と同一) --- */
html:not(.enh) #top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 2;
  pointer-events: none;
}

/* --- 研究室名ブロック: 左端・上下中央のオーバーレイ(フル版と同配置) --- */
#top .top-hero-text {
  position: absolute;
  left: 40px;
  right: 40px;
  top: calc(50% + 40px); /* フル版のタイトル中央線: calc(40px + 50vh) */
  transform: translateY(-50%);
  z-index: 3;
  color: #fff;
  pointer-events: none; /* 背後のタイルリンクを操作可能に保つ */
}

/* フル版は「英語タイトルの中心」を中央線に合わせる(JSで実施)。
   CSSで同じ結果にするため、アンカー箱の中身はタイトルのみとし、
   研究室名の行は箱の直下に絶対配置でぶら下げる */
#top .top-hero-sub {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 25px; /* main: gap 15px + タイトル margin-bottom 10px */
  padding: 15px 20px; /* main の .hero-description と同じ */
}

#top .scatter-title {
  /* mainフル版のJS自動フィット(2行目「ANIMAL BEHAVIOURAL STRATEGIES」が
     幅いっぱいに収まる最大サイズ)のCSS再現。除数はこのマークアップの
     glyph幅/フォントサイズ比の実測値(Hiragino角ゴ Bold+字間1%) */
  font-size: calc((100vw - 120px) / 20.35);
  /* 行送り = タイル行間(15px) + 大文字インク高さ(実測0.80em)。
     タイトル2行のインク端がタイル端にちょうど接し、黒い区切りに
     文字が重ならない(行間はビューポート寸法から幾何的に決まる) */
  line-height: calc(21px + 0.8em); /* タイル行間15px+ブラウザ差吸収の安全マージン(Safariはインクが約2px低い) */
  position: relative;
  /* インク中心の補正から1px上げ、AA・オーバーシュートの黒帯への滲みを防ぐ
     (DPR2ピクセル実測でタイル端に一致) */
  top: calc(0.044em - 1px);
  letter-spacing: 0.01em; /* フル版JSの自動調整(フォントの1%)と同じ比率 */
  font-weight: 700;
  padding: 15px 20px; /* main の .hero-title-dynamic と同じ(非表示枠線の箱) */
  margin: 0;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 単語間は実スペースに任せる(共通の margin 0.5em は二重の隙間になり
   「ANIMAL BEHAVIOURAL STRATEGIES」が1行に収まらない) */
#top .scatter-title .word {
  margin-right: 0;
}

/* 研究室名と所属: フル版 hero-description と同じ「1行の連続テキストが
   画面幅に応じて自然に折り返す」インライン方式 */
.top-hero-sub {
  display: block;
}

#top .subtitle-ja {
  display: inline;
  font-size: 18px;
  letter-spacing: 2px;
  margin: 0;
  color: #fff;
}

#top .university-line {
  display: inline;
  font-size: 18px; /* フル版 hero-description と同じ */
  letter-spacing: 2px;
  margin: 0;
  color: #fff;
}

/* main と同じ改行禁止の塊(折り返しは全角スペース位置のみ) */
.no-break {
  white-space: nowrap;
}

/* --- スマホ: フル版の 4列×12行 配置(上半分に大2枚、下半分に2×2) --- */
@media (max-width: 768px) {
  #top .top-grid {
    top: 0; /* フル版同様、グリッドは透明ナビの背後まで広がる */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 10px;
    padding: 10px;
  }

  /* 写真1: 左上(上半分の左) / 写真2: 右上(上半分の右) */
  #top .top-grid .img-wrap:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 7; }
  #top .top-grid .img-wrap:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 7; }
  /* 写真3〜6: 下半分に 2×2 */
  #top .top-grid .img-wrap:nth-child(3) { grid-column: 1 / 3; grid-row: 7 / 10; }
  #top .top-grid .img-wrap:nth-child(4) { grid-column: 3 / 5; grid-row: 7 / 10; }
  #top .top-grid .img-wrap:nth-child(5) { grid-column: 1 / 3; grid-row: 10 / 13; }
  #top .top-grid .img-wrap:nth-child(6) { grid-column: 3 / 5; grid-row: 10 / 13; }

  #top .top-hero-text {
    top: 50%; /* スマホのフル版はタイトル中心=50vh */
    /* スマホはタイトルをタイル2枚分(グリッド全幅)に拡大するため箱を全幅化 */
    left: 0;
    right: 0;
  }

  /* スマホはタイル行間が10px。
     フォントは「ANIMAL BEHAVIOURAL STRATEGIES」がほぼタイル2枚分
     (グリッド幅 = 100vw - 左右パディング10px×2)になるサイズ。
     除数はSafariのグリフ幅差でも外側の黒枠にはみ出さないよう
     ぴったり値20.35に約3%の安全率を掛けた21(左端はタイル左端に固定、
     余りは右側の余白になる) */
  #top .scatter-title {
    font-size: calc((100vw - 20px) / 21);
    /* ブロック=2行の左端を揃えた左寄せ、ブロック全体を画面中央に配置。
       実測(390px): 行頭16.7px(タイル内側・黒枠に出ない)、
       「LABORATORY OF」右端186.7px=中央仕切り(190px)の3.3px手前で
       左タイル内側にピッタリ収まる(3.3pxはSafariグリフ幅差の余裕) */
    width: max-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding: 15px 0;
    /* 行送り=黒帯クリアランス17px+インク高さ。タイル行間10pxに対して
       上下3.5pxずつの余裕(Safariのインク位置ズレ1〜1.5px込みで安全) */
    line-height: calc(17px + 0.8em);
    top: 0.044em; /* PCと同様、AA滲みが黒帯に入らない位置(DPR2実測) */
  }

  /* 説明行はタイル左端(10px)より2px内側で main のモバイル指定(14px) */
  #top .top-hero-sub {
    padding: 15px 12px;
  }
  #top .subtitle-ja,
  #top .university-line { font-size: 14px; }
}