/* =====================================================
   custom.css  —  サイト共通カスタムスタイル
   page.css / reset.css は変更せず、ここに追記していく
   ===================================================== */


/* -------------------------------------------------
   topbnr : 関連サイトバナーリンク ホバーエフェクト
   （総合研究大学院大学 / 統合進化科学コース /
     東京大学三崎臨海実験所）
   reset.css の .op:hover { opacity:.7 } を上書きし、
   brightness グローに置き換える
------------------------------------------------- */
.topbnr .bnrlist li a.op {
    opacity: 1 !important;
    transition: filter 0.5s ease,
                box-shadow 0.5s ease,
                border-color 0.5s ease,
                transform 0.5s ease !important;
}
.topbnr .bnrlist li a.op:hover {
    opacity: 1 !important;
    filter: brightness(2.0) !important;        /* ロゴが白く輝く */
    transform: translateY(-4px) !important;
    border-color: rgba(255,255,255,0.8) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6),
                0 0 36px rgba(255,255,255,0.35),
                0 16px 40px rgba(0,0,0,0.5) !important;
}


/* =====================================================
   idx2-theme : トップページ インタラクティブパネル
   （index.html / index_en.html）
   reset.css の .op img transition を上書きし、
   ズーム・オーバーレイ・浮き上がりを 0.5s に統一。
   ===================================================== */

/* ---- toplink（上部 3 パネル） ---- */

/* .op の opacity 暗転だけ無効化（transform transition は残す） */
.idx2-theme .toplink .linklist li a.op {
    opacity: 1 !important;
    filter: none !important;
    transition: border-color 0.5s, transform 0.5s, box-shadow 0.5s !important;
}
.idx2-theme .toplink .linklist li a.op:hover {
    opacity: 1 !important;
}
.idx2-theme .toplink .linklist li a.op img {
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.5s ease !important;   /* zoom のみ・opacity 固定で暗転なし */
}
.idx2-theme .toplink .linklist li a.op:hover img {
    opacity: 1 !important;
}

/* カードホバー：浮き上がり + マゼンダ枠線 */
.idx2-theme .toplink .linklist li a {
    border: 1px solid transparent !important;
    transition: border-color 0.5s, transform 0.5s, box-shadow 0.5s !important;
}
.idx2-theme .toplink .linklist li a:hover {
    border-color: rgba(228,0,127,0.55) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55) !important;
}

/* 画像コンテナ */
.idx2-theme .toplink .linklist li .linkimg {
    position: relative !important;
    overflow: hidden !important;
}
/* ズーム */
.idx2-theme .toplink .linklist li .linkimg img {
    transition: transform 0.5s ease !important;
    width: 100% !important;
    display: block !important;
}
.idx2-theme .toplink .linklist li:hover .linkimg img {
    transform: scale(1.06) !important;
}
/* 白いオーバーレイ（ズームと同じ 0.5s） */
.idx2-theme .toplink .linklist li .linkimg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.idx2-theme .toplink .linklist li:hover .linkimg::after {
    opacity: 0.18;
}


/* ---- toppress Topics（下部グリッドパネル群） ---- */

/* ul.presslist 間に隙間を追加 */
.idx2-theme .toppress .presslist {
    gap: 20px !important;
    margin-bottom: 20px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
}
.idx2-theme .toppress .presslist:last-child {
    margin-bottom: 0 !important;
}

/* li 幅を gap 込みで再計算 */
.idx2-theme .toppress .presslist li {
    width: calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
}

/* レスポンシブ：中画面（タブレット）は 2 列 */
@media (max-width: 1024px) {
    .idx2-theme .toppress .presslist li {
        width: calc(50% - 11px) !important;
        max-width: calc(50% - 11px) !important;
    }
}
/* レスポンシブ：小画面（スマホ）は 1 列 */
@media (max-width: 767px) {
    .idx2-theme .toppress .presslist {
        display: block !important;
        gap: 0 !important;
    }
    .idx2-theme .toppress .presslist li {
        width: auto !important;
        max-width: none !important;
        margin-bottom: 20px !important;
    }
    .idx2-theme .toppress .presslist li:last-child {
        margin-bottom: 0 !important;
    }
}

/* .op の opacity 暗転だけ無効化（transform transition は残す） */
.idx2-theme .toppress .presslist li a.op {
    opacity: 1 !important;
    filter: none !important;
    transition: border-color 0.5s, transform 0.5s, box-shadow 0.5s !important;
}
.idx2-theme .toppress .presslist li a.op:hover {
    opacity: 1 !important;
}
.idx2-theme .toppress .presslist li a.op img {
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.5s ease !important;   /* ズームのみ・opacity は固定 */
}
.idx2-theme .toppress .presslist li a.op:hover img {
    opacity: 1 !important;
}

/* カードホバー：浮き上がり + マゼンダ枠線 + シャドウ */
.idx2-theme .toppress .presslist li a {
    border: 1px solid transparent !important;
    transition: border-color 0.5s, transform 0.5s, box-shadow 0.5s !important;
}
.idx2-theme .toppress .presslist li a:hover {
    border-color: rgba(228,0,127,0.5) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.55) !important;
}

/* 画像コンテナ */
.idx2-theme .toppress .presslist .pressimg {
    position: relative !important;
    overflow: hidden !important;
}
/* ズーム（オーバーレイと同じ 0.5s） */
.idx2-theme .toppress .presslist .pressimg img {
    transition: transform 0.5s ease !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: scale(1.06) !important;   /* 最初から拡大して隙間を埋める */
}
.idx2-theme .toppress .presslist li:hover .pressimg img {
    transform: scale(1.12) !important;
}
/* 白いオーバーレイ */
.idx2-theme .toppress .presslist .pressimg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.idx2-theme .toppress .presslist li:hover .pressimg::after {
    opacity: 0.18;
}

/* キャプションテキスト */
.idx2-theme .toppress .presslist .presstxt {
    font-size: 15px !important;
    color: #efefef !important;
    line-height: 1.65 !important;
    padding: 18px 24px 22px !important;
    letter-spacing: 0.04em !important;
}


/* =====================================================
   n2c1-theme : ニュース・アーカイブページ共通スタイル
   （news.html および全アーカイブファイル）
   ===================================================== */
/* ===== Variant 2C1 : Almost square ===== */

/* セクション見出し：オリジナルの縦棒デザインを踏襲・文字を白く */
.n2c1-theme .hdl {
    border-left: 12px solid #E4007F !important;
    padding-left: 15px !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 40px !important;
    color: #fff !important;
}

/* コンテンツボックス */
.n2c1-theme .equshare .shareinner {
    background: #0d0d0d !important;
    border-radius: 3px !important;
    border: 1px solid #1a1a1a !important;
    padding: 36px 48px 48px !important;
}
.n2c1-theme .equshare table { width: 100%; border-collapse: collapse; }

/* 新着情報：tr.top-align 構造 */
.n2c1-theme .equshare tr.top-align {
    border-bottom: 1px solid #161616;
    transition: background 0.15s;
}
.n2c1-theme .equshare tr.top-align:last-child { border-bottom: none; }
.n2c1-theme .equshare tr.top-align:hover { background: rgba(255,255,255,0.025); }

/* イベント・最近の業績・公募・受賞など：th.top-align 構造 */
.n2c1-theme .equshare tr:has(th.top-align) {
    border-bottom: 1px solid #161616;
    transition: background 0.15s;
}
.n2c1-theme .equshare tr:has(th.top-align):last-child { border-bottom: none; }
.n2c1-theme .equshare tr:has(th.top-align):hover { background: rgba(255,255,255,0.025); }

/* 日付列：縦仕切り線付き（左padding追加で枠から離す） */
.n2c1-theme .equshare th {
    color: #E4007F !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 16px 20px 16px 16px !important;
    vertical-align: top !important;
    white-space: nowrap !important;
    width: 130px !important;
    border-right: 1px solid #1e1e1e !important;
}
/* 本文列 */
.n2c1-theme .equshare td,
.n2c1-theme .equshare .news-table-font-size {
    font-size: 15px !important;
    color: #e8e8e8 !important;
    padding: 16px 0 16px 24px !important;
    line-height: 1.75 !important;
    vertical-align: top !important;
}

/* 論文カード */
.n2c1-theme .reschbox .reschlist li {
    background: #0d0d0d !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    transition: border-color 0.25s, transform 0.3s !important;
}
.n2c1-theme .reschbox .reschlist li:hover {
    border-color: rgba(228,0,127,0.45) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}
.n2c1-theme .reschbox .reschlist .reschimg a { overflow: hidden; display: block; }
.n2c1-theme .reschbox .reschlist .reschimg img { transition: transform 0.4s; width: 100%; }
.n2c1-theme .reschbox .reschlist li:hover .reschimg img { transform: scale(1.06); }
.n2c1-theme .reschbox .reschlist .reschtit { font-size: 18px !important; color: #fff !important; }
.n2c1-theme .reschbox .reschlist .reschcate .catein {
    background: transparent !important;
    border-color: #333 !important;
    color: #aaa !important;
}

/* ===== プレスリリース画像：ホバーで明るく+ズーム ===== */

/* .op の暗転を無効化（zoom transition は残す） */
.n2c1-theme .reschbox .reschlist .reschimg .op {
    opacity: 1 !important;
    filter: none !important;
}
.n2c1-theme .reschbox .reschlist .reschimg .op img {
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.5s ease !important;   /* zoom のみ・opacity 固定で暗転なし */
}
.n2c1-theme .reschbox .reschlist .reschimg .op:hover img {
    opacity: 1 !important;
}

/* 画像コンテナ */
.n2c1-theme .reschbox .reschlist .reschimg {
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
.n2c1-theme .reschbox .reschlist .reschimg a {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
}

/* ズーム */
.n2c1-theme .reschbox .reschlist .reschimg img {
    transition: transform 0.5s ease !important;
    width: 100% !important;
    display: block !important;
}
.n2c1-theme .reschbox .reschlist li:hover .reschimg img {
    transform: scale(1.06) !important;
}

/* 白いオーバーレイで均一に明るく */
.n2c1-theme .reschbox .reschlist .reschimg a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.n2c1-theme .reschbox .reschlist li:hover .reschimg a::after {
    opacity: 0.18;
}

/* =====================================================
   collabobox : 共同研究ページ 画像パネル ホバーエフェクト
   （collaboration.html / collaboration_en.html）
   scientists.html と同じ白ブライトネス効果を適用
   ===================================================== */

/* .op の暗転を無効化 */
.collabobox .collabolist .collaboitem.op:hover,
.collabobox .collabolist .collaboitem.op:hover img {
    opacity: 1 !important;
    filter: none !important;
}
/* 画像コンテナ */
.collabobox .collabolist .collaboimg {
    position: relative;
    overflow: hidden;
}
/* ズーム */
.collabobox .collabolist .collaboimg img {
    transition: transform 0.4s ease;
}
.collabobox .collabolist .collaboitem:hover .collaboimg img {
    transform: scale(1.06);
}
/* 白いオーバーレイ */
.collabobox .collabolist .collaboimg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.collabobox .collabolist .collaboitem:hover .collaboimg::after {
    opacity: 0.18;
}


/* ===== キャプションテキスト：暗めの背景＋白文字 ===== */
.n2c1-theme .reschbox .reschlist li center {
    display: block;
    padding: 14px 18px 18px !important;
    text-align: left !important;
    background: #0a0a0a !important;
    border-top: 1px solid #1a1a1a !important;
}
.n2c1-theme .reschbox .reschlist li center p {
    margin: 0 !important;
    line-height: 1.65 !important;
}
.n2c1-theme .reschbox .reschlist li center br { display: none; }
.n2c1-theme .reschbox .reschlist li center p span {
    font-size: 14px !important;
    color: #fff !important;
    letter-spacing: 0.06em !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    display: block !important;
}