body {
    width: 100% !important;
    background-color: #f9f9f9 !important; /* 濃いグレーを明るく */
    padding: 0 !important;
    margin: 0 !important;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
}

/* 左側の空白カラム(200px)を消す */
div#header_blank,
div#menu_blank,
div#body_blank,
div#footer_blank {
    display: none !important;
}

/* メインカラムの固定幅(800px)とフロートを解除 */
div#header_main,
div#menu_main,
div#body,
div#body_main,
div#footer,
div#footer_main {
    width: 100% !important;
    float: none !important;
    max-width: 1280px !important; /* ここで最大幅を制御 */
    margin: 0 auto !important;    /* 中央寄せ */
    background-color: transparent !important; /* 背景の白を透過または調整 */
    height: auto !important;      /* 固定の高さを解除 */
    min-height: 0 !important;
}

/* テーブル構造のリセット（ヘッダー周り） */
#header_main table,
#header_main tr,
#header_main td {
    width: 100% !important;
    display: block !important;
    height: auto !important;
}

/* =========================================
   New Design Styling
   ここから下は新しいデザイン定義
   ========================================= */

/* コンテンツ全体を囲むコンテナ */
.container {
    padding: 20px;
    box-sizing: border-box;
}

/* リンク色 */
a:link, a:visited {
    color: #0056b3 !important;
    text-decoration: none;
}
a:hover {
    color: #003d82 !important;
    background-color: transparent !important; /* user.cssの赤背景を消す */
    text-decoration: underline !important;
}

/* 見出し */
h1 {
    border-left: 6px solid #0056b3 !important;
    padding-left: 15px !important;
    font-size: 1.8em !important;
    margin: 40px 0 20px 0 !important;
    color: #0056b3 !important;
}

h2 {
    border-bottom: 2px solid #0056b3 !important;
    padding-bottom: 10px !important;
    margin-top: 40px !important;
    font-size: 1.5em !important;
    border-left: none !important; /* user.cssのborderを消す */
}

/* 白いカードボックス */
.section-box {
    background: #fff;
    padding: 30px 40px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* プロフィールヘッダー */
.header-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}
.profile-img { flex: 0 0 200px; text-align: center; }
.profile-img img { width: 100%; border-radius: 8px; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.profile-info { flex: 1; }
.profile-name { font-size: 2.2em; font-weight: bold; margin-bottom: 5px; }

/* ボタンリンク */
.btn-link {
    display: inline-block;
    background: #f0f0f0;
    padding: 8px 16px;
    border-radius: 20px;
    color: #333 !important;
    border: 1px solid #ccc;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* Newsリスト */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 項目間の隙間を少し広げました */

    /* ▼▼▼ ここから追加・変更 ▼▼▼ */
    max-height: 400px;   /* この高さを超えたらスクロールさせる（お好みで300px~500pxに調整） */
    overflow-y: auto;    /* 縦方向のスクロールを有効にする */
    padding-right: 10px; /* スクロールバーと文字が被らないように右に隙間を作る */
    
    /* 境界線（オプション）：スクロールエリアがわかるように上下に薄い線を入れる場合 */
    /* border-top: 1px solid #eee; */
    /* border-bottom: 1px solid #eee; */
    /* padding-top: 10px; */
    /* ▲▲▲ ここまで追加・変更 ▲▲▲ */
}
.news-list::-webkit-scrollbar {
    width: 8px; /* スクロールバーの太さ */
}

.news-list::-webkit-scrollbar-track {
    background: #f1f1f1; /* 背景色 */
    border-radius: 4px;
}

.news-list::-webkit-scrollbar-thumb {
    background: #ccc; /* バーの色 */
    border-radius: 4px;
}

.news-list::-webkit-scrollbar-thumb:hover {
    background: #999; /* ホバー時の色 */
}


.news-content {
    /* テキストと画像を横並びにする設定 */
    display: flex;
    justify-content: space-between; /* 文字は左、画像は右に寄せる */
    align-items: flex-start;        /* 上揃え */
    gap: 20px;                      /* 文字と画像の間隔 */
}

.news-text {
    flex: 1; /* テキストは残りの幅をすべて使う */
}

.news-thumb {
    flex: 0 0 150px; /* 画像エリアの幅を150pxに固定 */
    line-height: 0;  /* 画像の下に隙間ができないように */
}

.news-thumb img {
    width: 100%;     /* 親要素(150px)に合わせてリサイズ */
    height: auto;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.news-thumb img:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
    cursor: pointer;
}

/* 研究ビジョン */
.research-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* カードを中央寄せにする（数が少ないときに見栄えが良い） */
    justify-content: center; 
    margin-top: 20px;
}

.research-item {
/* 幅の調整: 基本は300px程度、画面が広ければ32%まで */
    flex: 0 1 320px;      /* ★ここが重要: 拡大しすぎないように固定幅ベースに変更 */
    max-width: 350px;     /* ★最大でも350px幅で止める（これで巨大化を防ぐ） */
    
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    
    /* フレックスボックス内での挙動 */
    margin-bottom: 10px;
}

.research-item:hover {
    transform: translateY(-5px); /* マウスを乗せると少し浮く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.research-thumb {
    width: 100%;
    height: 200px;       /* 画像の高さを統一 */
    overflow: hidden;
    background-color: #f0f0f0;
    border-bottom: 1px solid #eee;

/* ▼ 画像をボックスのど真ん中に配置する設定 ▼ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;       /* 余白を入れて窮屈さをなくす */
    box-sizing: border-box;
}

.research-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;         /* 幅を自動調整 */
    height: auto;        /* 高さを自動調整 */
    
    /* ★重要: 図が切れないように全体を表示する設定に変更 */
    object-fit: contain; 
    
    transition: transform 0.3s;
}

.research-item:hover .research-thumb img {
    transform: scale(1.05); /* マウスオンで画像ズーム */
}

.research-detail {
    padding: 15px;
}

.research-detail h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #0056b3;
    border: none !important; /* 既存のh3スタイルをリセット */
    padding: 0 !important;
}

.research-detail p {
    font-size: 0.9em;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* Selected Publications Tag Styling */
.selected-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    margin-right: 8px;
    color: #fff;
    vertical-align: text-bottom;
}

/* 色設定 */
.tag-survey  { background-color: #17a2b8; } /* サーベイ：水色 */
.tag-award   { background-color: #d9534f; } /* 受賞：赤 */
.tag-conf    { background-color: #28a745; } /* ICCなど：緑 */
.tag-journal { background-color: #007bff; } /* ジャーナル：青 */

/* 1. 折りたたみエリアの基本設定（閉じている状態） */
.foldable-area {
    position: relative;
    max-height: 500px; /* 初期の高さ（お好みで調整：300px～600px） */
    overflow: hidden;  /* はみ出た部分を隠す */
    transition: max-height 0.6s ease; /* ヌルっと開くアニメーション */
}

/* 2. 下の方を白くボカすグラデーション（閉じたときのみ表示） */
.foldable-area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* グラデーションの高さ */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 80%);
    pointer-events: none; /* ボタンクリックの邪魔をしないように */
    transition: opacity 0.3s;
}

/* 3. 開いた状態（JavaScriptで .is-open を付与） */
.foldable-area.is-open {
max-height: none;     /* 制限をなくす（開く瞬間にパッと表示されます） */
    overflow: visible;    /* スクロールバーなども出ないように完全に表示 */
}

/* 開いたときはグラデーションを消す */
.foldable-area.is-open::after {
    opacity: 0;
    pointer-events: none;
}

/* 4. 開閉ボタンのデザイン */
.toggle-btn-area {
    text-align: center;
    margin-top: -20px; /* グラデーションの上に少し被せる */
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}

.btn-toggle {
    display: inline-block;
    background: #0056b3; /* テーマカラーの青 */
    color: #fff;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.3s, transform 0.2s;
}

.btn-toggle:hover {
    background: #004494;
    transform: translateY(-2px);
}

/* Funding List Styling */
.funding-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.funding-list li {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
    line-height: 1.5;
}

.funding-list li:last-child {
    border-bottom: none;
}

.funding-year {
    display: inline-block;
    font-weight: bold;
    color: #0056b3;
    min-width: 90px; /* 年号を揃える */
    vertical-align: top;
}

.funding-agency {
    display: inline-block;
    font-weight: bold;
    color: #555;
    margin-right: 10px;
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.funding-title {
    display: inline-block;
}


/* スマホ対応 */
@media (max-width: 768px) {
    .header-section, .research-vision { flex-direction: column; text-align: center; }
    .profile-img { margin: 0 auto; }
    .news-content {
            flex-direction: column; /* 縦並びに変更 */
        }
    .news-thumb {
        margin-top: 10px;
        flex: 0 0 auto;
        width: 100%;
        max-width: 200px; /* スマホでは大きすぎないように制限 */
    }
    .section-box { padding: 20px; }
    .funding-year {
        display: block;
        margin-bottom: 2px;
    }
}