@charset "UTF-8";
/* CSS Document */

html {
    scroll-behavior: smooth;
}

/* 全体の基本設定 */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #FFFFFF;
}

a:hover {
    color: #003366;
}

p {
    margin: 10px 0;
}

/* リンククリック時のジャンプ先の場所の設定（JSの自動計算結果を受け取る） */
:target {
    scroll-margin-top: var(--scroll-offset, 100px); 
}

.no-break {
    display: inline-block; /* 途中での改行を抑制 */
}

/* =========================================================
   1. ヘッダー全体 (Header Layout)
========================================================= */
.site-header {
    display: flex;
    justify-content: space-between; /* タイトルは左、スイッチは右に配置 */
    align-items: center;            /* 縦方向の中央で揃える */
    padding: 30px 30px;             /* 上下20px、左右30pxの余白（お好みで調整） */
    background-color: #003366;      /* 背景色 */
    border-bottom: 1px solid #e0e0e0; /* ヘッダー下部にうすい区切り線 */
}

/* タイトル部分 */
.header-titles {
    flex-grow: 1; /* 余白を埋める */
}

.header-titles a {
    text-decoration: none; /* リンクの下線を消す */
    color: #ffffff;        /* タイトルの文字色 */
}

.header-title a:hover {
    color: inherit;
    opacity: 0.7;
}

.header-titles h1 {
    margin: 0;
    font-size: 2rem;     /* PCでのタイトルサイズ */
    font-weight: bold;
    line-height: 1.2;
}

.header-titles p {
    margin: 5px 0 0 0;
    font-size: 0.95rem;
    color: #ffffff;        /* サブタイトルの文字色（少し薄く） */
    opacity: 0.9;
}

/* =========================================================
   2. 言語切り替えスイッチ (Language Switch)
========================================================= */
.lang-switch {
    display: inline-flex;
    background-color: #f1f3f5; /* スイッチのベースカラー（薄いグレー） */
    border-radius: 30px;       /* 美しいカプセル型 */
    padding: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* 内側にわずかな影 */
    margin-left: 20px;         /* タイトルとの間隔 */
}

.lang-btn {
    text-decoration: none;
    color: #888888;            /* 非アクティブ時の文字色 */
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 25px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* なめらかな変化 */
}

.lang-btn:hover {
    color: #555555; /* ホバー時に少し濃くする */
}

/* 選択中（アクティブ）の言語 */
.lang-btn.is-active {
    background-color: #ffffff; /* 白抜きにして浮き上がらせる */
    color: #0056b3;            /* テーマカラー（お使いのサイトのメインカラーに変更してください） */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 外側に影 */
    pointer-events: none;      /* クリック無効化 */
}

/* =========================================================
   3. スマホ・タブレット表示の調整 (Responsive Design)
========================================================= */
@media screen and (max-width: 768px) {
    .site-header {
        padding: 15px;
        position: relative; /* スイッチを絶対配置するための基準にする */
        /* スマホでは縦並びにせず、タイトル幅を制限してスイッチを右上に固定します */
    }

    .header-titles {
        max-width: calc(100% - 100px); /* スイッチが重ならないようにタイトルの幅を制限 */
    }

    .header-titles h1 {
        font-size: 1.3rem; /* スマホ用にタイトルを少し小さく */
    }

    .header-titles p {
        font-size: 0.8rem;
    }

    /* スマホではスイッチを右上に固定 */
    .lang-switch {
        position: absolute;
        top: 15px;
        right: 15px;
        margin-left: 0;
        padding: 3px;
    }

    .lang-btn {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
}



nav a,
nav a:link,
nav a:visited,
nav a:active {
    text-decoration: none;
    color: inherit;
}


/* ナビゲーションメニューのデザイン */
nav {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 999;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 画面が狭い時に折り返す設定 */
}
nav a {
    display: block;
    padding: 15px 20px;
    font-weight: bold;
    transition: background-color 0.3s;
}
nav a:hover {
    color: #003366;
    background-color: #e6f0fa;
    opacity: 0.9;
}


/* =========================================================
   ページ内リンク用ナビゲーション（ローカルナビ）の全体枠
========================================================= */
nav.local-nav {
    position: sticky; 
    top: 55px;        /* local-navの高さの微調整 */
    z-index: 990;     /* メインnav(999)の下、他コンテンツより上に設定 */
    background-color: rgba(255, 255, 255, 0.95); /* 少し透ける白背景 */
    padding: 10px 20px; /* 上下左右の余白 */
    margin: 0 0 0px 0; /* 下に余白を空ける */
    border-bottom: none;
    
    /* Flexboxで「メニューリスト」と「TOCスイッチ」を横並びにする */
    display: flex;
    justify-content: center; /* 全体を中央寄せ */
    align-items: center;     /* 縦方向の中央を揃える */
    flex-wrap: wrap;         /* スマホ等で画面が狭い時は折り返す */
    gap: 30px;               /* メニューとTOCスイッチの間の隙間 */
}

/* =========================================================
   ローカルナビ：ページ内リンク（リスト部分）
========================================================= */
nav.local-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* ボタンとボタンの隙間 */
    margin: 0;
    padding: 0;
    list-style: none; /* デフォルトの黒丸を消す */
}

nav.local-nav li {
    list-style: none;
}

/* リンクボタンのデザイン */
nav.local-nav a {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;        /* 下線を消す */
    color: #003366;               /* 文字色 */
    background-color: #f0f5fa;    /* 薄い青の背景 */
    border: 1px solid #cce0f5;    /* 薄い青の枠線 */
    border-radius: 20px;          /* 角を丸くしてタグっぽくする */
    transition: all 0.3s ease;
}

/* リンクボタンにマウスを乗せた時の動き */
nav.local-nav a:hover {
    background-color: #003366;    /* 背景を濃い青に */
    color: #ffffff;               /* 文字を白に */
    transform: translateY(-2px);  /* ほんの少し上に浮く */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
}



/*
#education, 
#career, 
#awards, 
#publications, 
#books, 
#presentations {
    /* メインナビの高さ ＋ ローカルナビの高さ ＋ 見た目のゆとりの合計値を指定。 
    scroll-margin-top: 110px;
}
/*

/* =========================================================
   ローカルナビ：TOC表示切り替えスイッチ
========================================================= */
nav.local-nav #tocDisp {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 20px; /* リンクボタンと同じように角を丸くする */
    padding: 4px 12px;
    font-size: 0.85rem;
    margin: 0; 
}

nav.local-nav #tocDisp b {
    margin-right: 0px;
    color: #555;
}

nav.local-nav #tocOn, 
nav.local-nav #tocOff {
    display: inline-block;
    cursor: pointer;
    color: #003366;
    padding: 2px 4px;
    transition: opacity 0.2s ease;
}

/* スイッチの文字にマウスを乗せた時 */
nav.local-nav #tocOn:hover, 
nav.local-nav #tocOff:hover {
    opacity: 0.6; /* 少しフワッと薄くする */
}

/* 「あり | なし」の間の縦線 */
nav.local-nav #tocHbar {
    margin: 0;
    color: #aaa;
}

/* ========================================================= */


div.tocDisp #tocOn, 
div.tocDisp #tocOff {
    display: inline-block;
    cursor: pointer;
    color: #003366;
    margin-bottom: 10px;
    padding: 0;
    transition: opacity 0.2s ease;
}

/* スイッチの文字にマウスを乗せた時 */
div.tocDisp #tocOn:hover, 
div.tocDisp #tocOff:hover {
    opacity: 0.6; /* 少しフワッと薄くする */
}


/* =========================================================
   TOC表示/非表示ボタンのデザイン
========================================================= */
/* クリック可能な状態（青色・下線・指マークで誘導する） */
.cursorOn {
    color: #003366;           /* サイトのリンク色に合わせる */
    cursor: pointer;          /* マウスを乗せると指のマークになる */
    text-decoration: underline; /* 押せることを示すアンダーライン */
    transition: color 0.2s ease; /* ふわっと色を変える */
}
.cursorOn:hover {
    color: #66b3ff;           /* マウスを乗せた時に明るくする */
}

/* 現在選択されている状態（グレーアウトして控えめにする） */
.cursorOff {
    color: #999999;           /* 押せないことを示すグレー */
    cursor: default;          /* 矢印のまま */
    text-decoration: none;    /* アンダーラインを消す */
    font-weight: bold;        /* 今の状態であることを示すために少し太字に */
}

/* 区切り線のデザイン */
#tocHbar {
    color: #cccccc;
    margin: 0;
}





/* メインコンテンツのレイアウト */
main.container {
    max-width: 900px;
    margin: 0px auto 30px auto; /* 左右中央寄せ top right bottom left*/
    padding: 0px 30px 30px 30px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    box-sizing: border-box;
}


/* すべてのセクションのスクロール位置を一括で設定 */
main.container section {
    margin-top: 20px;
    margin-bottom: 30px;
    /* scroll-margin-top: 70px;  jsから読み込み設定 (target を利用)．*/
}

.container h2 {
    margin: 0 0 20px 0; /* top right bottom left */
}

section h2 {
    color: #003366;
    border-bottom: 2px solid #003366;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
ul.news-list {
    list-style-type: none;
    padding: 0;
}
ul.news-list li {
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}
.news-date {
    font-weight: bold;
    margin-right: 15px;
    color: #555;
}


/* =========================================================
   フッターのレイアウト設定
========================================================= */
footer {
    background-color: #333;
    color: #e0e0e0;
    padding: 20px 0 5px;
    font-size: 1rem;
    line-height: 1.8;
}

.footer-container {
    display: flex;             /* 横並びにする */
    justify-content: space-between; /* 左右に均等に配置 */
    gap: 40px;                 /* 左右のブロックの間の隙間 */
    max-width: 1200px;         /* コンテンツの最大幅（サイトに合わせて調整してください） */
    margin: 0 auto;            /* 中央寄せ */
    padding: 0 20px;           /* フッター全体の内側の余白（上下40px、左右20px） */
}

/* 左右のブロックの幅設定 */
.footer-left,
.footer-right {
    flex: 1; /* 左右の幅を 1:1（50%ずつ） の等分にする */
}

/* フッター内の見出し（h2）のデザイン調整用 */
#footer h2 {
    color: #ffffff; /* 見出しの色 (white) */
    font-size: 30px;
    font-weight: 700;       /* 文字の太字設定 */
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: 1px solid #555;
}

/* フッター内のリンクのデザイン */
#footer p {
    font-size: 14px;
    text-align: center;
    margin-bottom: 2px;
}

#footer a {
    color: #66b3ff;         /* ダーク背景に映える爽やかなライトブルー */
    text-decoration: none;
    transition: all 0.3s ease; /* 色が変わる時にフワッとするアニメーション */
}

#footer a:hover {
    color: #99ccff;         /* マウスオーバーでさらに明るく光るように */
    text-decoration: underline;
}

/* 3. 連絡先の強調文字 (strong) */
#footer strong {
    color: #ffffff;
    display: inline-block;
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 1rem;
}

/* 4. 補足文字 (small) */
#footer small {
    color: #aaaaaa;         /* 補足は少し暗めのグレーにして階層を作る */
    display: inline-block;
    margin-top: 0px;
}

/* 5. Google Map の埋め込み */
#footer .GoogleMap_embed iframe {
    display: block;
    border-radius: 8px;     /* マップの角を少し丸めて柔らかい印象に */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* マップに少し影をつけて浮き上がらせる */
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

#footer .coop-course-header {
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 2px;
    font-size: 0.9em;
    opacity: 0.7;
    line-height: 1;
}

#footer .coop-course-contents {
    margin-left: 50px;
    margin-bottomo: 20px;
    font-size: 1.0em;
    opacity: 0.85;
    line-height: 1.2;
}

/* =========================================================
 *    YouTube動画のレスポンシブ対応
 * ========================================================= */
.YouTube-video {
    width: 90%;         /* 横幅を親要素（画面や枠）いっぱいに広げる */
    height: auto;        /* 高さは自動計算させる */
    aspect-ratio: 16 / 9; /* 縦横比をYouTube標準の「16:9」に固定 */
    max-width: 800px;    /* パソコンの大きな画面でも最大800pxで止める */
    display: block;      /* 中央寄せにするための準備 */
    margin: 0 auto;      /* max-widthで止まった時に、中央に配置する */
}


/* =========================================================
 *    アイコン付きリンクの設定
 * ========================================================= */
.icon-link {
    display: inline-flex;    /* アイコンと文字を横並びのグループにする */
    align-items: center;     /* 縦の「中央」を揃える！ */
    gap: 6px;                /* アイコンと文字の間に少しだけ余白を作る */
    text-decoration: none;   /* リンクの下線を消す */
}
.icon-link:hover {
    text-decoration: underline; /* 乗せた時だけ下線を出す */
    opacity: 0.8;
}
.inline-icon {
    flex-shrink: 0;          /* スマホなどで画面が狭くなってもアイコンを潰さない */
}



/* 見出しと段落の設定 */
.container h3 {
    color: #000;
    margin: 20px 0 5px 0;
    font-size: 1.2rem;
}
#research p {
    margin: 0;
}

.research-topic {
    font-size: 30px;
    margin: 30px 0 15px 0;
    text-align: center;
}

/* 画像設定 */
.figure, .figure_zoom {
    text-align: center;
    margin-top: 30px;
}
.figure img, .figure_zoom img {
    max-width: 100%;
    height: auto;
    transition: all 0.5s;
}
.figure img {
    margin-bottom: 25px;
}
.figure_zoom img:hover {
    transform: scale(1.02);
}
.figure-indent-box {
    margin-left: 20px;
    margin-top: 5px; 
    margin-bottom: 10px;
    text-align: center;
    font-size: 0.95em;
}
.figure-references {
    margin-left: 0;
    margin-top: 0; 
    margin-bottom: 10px;
    text-align: center;
    line-height: 22px;
}

/* Contact/Access のデザイン */
#access {
    margin-bottom: 0;
}
.contact-item {
    margin-bottom: 10px;
}
.indent-box {
    margin-left: 20px;
    margin-top: 25px; 
    line-height: 25px;
}
.indent-box2 {
    margin-left: 20px;
    margin-top: 10px; 
    line-height: 25px;
}
.indent-box3 {
    margin-left: 20px;
    margin-top: 10px; 
    line-height: 22px;
}

/* マップ埋め込みコンテナの基準位置設定 */
.GoogleMap_embed {
    position: relative; /* ←【重要】ボタンの基準位置にするための魔法です */
    margin: 20px 0 10px 0;
    padding: 0;
    color: #333;
}

/* 「Open with Google Map」ボタンのデザインと配置 */
.btn-open-map {
    position: absolute;   /* コンテナ(relative)を基準に浮かせます */
    top: 10px;            /* 上から10px */
    right: 10px;          /* 右から10px */
    z-index: 10;          /* 地図より手前に表示 */
    background-color: #ffffff; /* 白背景 */
    color: #333333 !important; /* 文字色（リンクの青色を上書き） */
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none !important; /* 下線を消す */
    border: 1px solid #cccccc;
    border-radius: 4px;   /* 角を少し丸く */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 軽く影をつけてボタンっぽく */
    transition: all 0.2s ease;
}

/* マウスを乗せた時の動き */
.btn-open-map:hover {
    background-color: #f8f9fa;
    color: #003366 !important;
    transform: translateY(-1px); /* ほんの少しフワッと浮く */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 影を濃くする */
}


/* wrapper --------------------------------------------------*/
#wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

/* CLASS -----------*/
.clear {
    clear: both;
}
.none {
    display: none;
}

/* メンバー個別ページ等の設定 --------------------------------------------------*/
.one_block h3 {
    margin: 5px 0 0 0;
}

/* .one_block .m_face {
    float: left;
    margin-top: 10px;
    margin-right: 40px;
} */

.one_block .m_detile {
    width: 470px;
    float: left;
    margin: 5px 0 0 0;
}

/* profileの横並びレイアウト */
.profile-wrap {
    display: flex;           /* 横並びを指定 */
    align-items: flex-start; /* 上端を揃えて配置する（中央揃えが良い場合は center に） */
    gap: 30px;               /* 画像とテキストの間の余白 */
    margin-bottom: 40px;     /* 下のコンテンツとの余白 */
}

.m_face {
    margin: 0;              /* pタグのデフォルトの余白を消す */
    flex-shrink: 0;         /* 画面が狭くなっても画像が縮まないようにする */
}

.m_detail {
    list-style: none;       /* defaultの黒丸マーカーを消去 */
    margin: 0;              /* pタグのデフォルトの余白を消す */
    padding: 0;
    line-height: 1.4;       /* 行間を少し広げて読みやすく */
}

.m_detail2 {
    list-style: none;       /* defaultの黒丸マーカーを消去 */
    margin-top: 12px;        
    padding: 0;
    line-height: 1.4;       /* 行間を少し広げて読みやすく */
}

.m_detail li {
    margin-bottom: 6px;     /* リストの行間 */
    line-height: 1.0;       /* スマホなどで２行になった場合の行間 */
}

.m_detail2 li {
    margin-bottom: 8px;     /* リストの行間 */
    line-height: 1.0;       /* スマホなどで２行になった場合の行間 */
}

.m_detail li:last-child,
.m_detail li:last-child {
    margin-bottom: 0;       /* 最終行のみmarginを0にする */
}
.m_detail .prof-name {
    margin-top: 8px;
    margin-bottom: 10px;
    font-weight: bold;   /* 太字にする */
    font-size: 1.2em;    /* 少しだけ大きくする */
    margin-bottom: 10px; /* 名前の下だけ少し広めに隙間を空ける */
    color: #003366;      /* サイトのテーマカラー（紺色）に合わせるなど */
}


.container > ul {
    margin: 5px 0 10px 0;
}
.container a:link {
    color: #0000c0;
}

/* リスト全体の設定 */
.member-list small {
    display: block;
    opacity: 0.8;
    margin-top: 5px;
    margin-bottom: 5px;
}

.project-list,
.member-list,
.mypage-list,
.presentation-list {
    list-style-type: none;
    padding-left: 20px;
    margin: 0px 0;
}

/* 各項目の設定 */
.project-list li,
.member-list li,
.mypage-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10px;
    line-height: 1.2;
}

#presentations .presentation-year {
    margin-top: 0;
    margin-bottom: 0;
}

#presentations .authors,
#presentations .title,
#presentations .conference,
#presentations .place_date {
    margin-bottom: 1px;
}

.presentation-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* カスタムマーカー */
.project-list > li::before,
.member-list > li::before,
.mypage-list > li::before,
.presentation-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 8px;
    height: 8px;
    background-color: #003366;
    border-radius: 50%;
}


/* 選択されているボタンのスタイル */
.local-nav a.active {
    background-color: #333; /* お好みの色に変更してください */
    color: #fff;
    font-weight: bold;
    /* 必要に応じて border などの装飾を追加 */
}

.transport-list {
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 25px;
    padding-left: 0px;
    font-size: 0.82em;
}
.transport-list li {
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
    line-height: 1.1;
    list-style: none;    /* デフォルトの黒丸を消す */
}
.transport-list > li::before {
    content: "-";
    color: #e0e0e0;
    position: absolute;
    left: 0;
    top: 0em;
}



.access-links {
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 2px;
    padding-left: 0px;
    font-size: 0.9em;
}
.access-links li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    line-height: 1.0;
    list-style: none;    /* デフォルトの黒丸を消す */
}
.access-links > li::before {
    content: ">>";
    color: #e0e0e0;
    position: absolute;
    left: 0;
    top: 0em;
}


/* --- 入れ子になった賞歴（award-list）の設定 --- */
.member-award-list {
    margin-top: 0px;     /* 名前の下との少しの余白 */
    margin-bottom: 10px;
    padding-left: 20px;  /* 右に少しインデントして入れ子感を出す */
    opacity: 0.8;
}

.member-award-list li {
    font-size: 14px;     /* 名前の文字より少し小さくする */
    font-weight: normal; /* 太字を解除 */
    color: #555;         /* 真っ黒ではなく少しグレーにして落ち着かせる */
    margin-top: 5px;
    margin-bottom: 5px;  /* 賞歴同士の余白 */
    padding-left: 15px;
    list-style: none;    /* デフォルトの黒丸を消す */
    position: relative;
    line-height: 18px;
}

/* カスタムマーカー */
.member-award-list li::before {
    content: "";
    background-image: url('../images/icon-GoldCup.png');
    background-repeat: no-repeat;  /* 画像を繰り返さない */
    background-position: center;    /* 画像を中央に配置（位置調整用） */
    background-size: contain;      /* 指定したサイズ内に画像全体が収まるように自動縮小 */
    position: absolute;
    width: 20px;
    height: 17px;
    left: -10px;
    top: -1px;
    bottom: 2px;
    /* opacity: 0.8; */
}

#OBOGs h2 {
    opacity: 0.9;
}

#OBOGs h3 {
    opacity: 0.7;
}

/* table --------------------------------------------------*/
.one_block table {
    border: #CCC 0px solid;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}
.one_block table caption {
    background-color: #D2FDE8;
    padding: 5px 0;
}
.one_block table tbody tr {
    border: #808080 1px solid;
}
.one_block table tbody tr th {
    border: #808080 1px solid;
    font-weight: 450;
    background-color: #e6f0fa;
    padding: 5px 0;
}
.one_block table tbody tr td {
    border: #808080 1px solid;
    padding: 5px 0;
    text-align: center;
}
.one_block table tbody tr .v_num {
    width: 80px;
}

/*（t_member2）*/
.one_block .t_member2 tbody tr th {
    text-align: center;
    padding: 5px 0;
    width: 180px;
}
.one_block .t_member2 tbody tr .import, 
.one_block .t_member2 tbody tr .box {
    text-align: left;
    padding: 5px 20px;
}

/*（t_prize）*/
.one_block .t_prize tbody tr th {
    width: 120px;
}
.one_block .t_prize tbody tr td {
    padding: 5px 15px;
    text-align: left;
}

/*（t_member）*/
.one_block .t_member tbody tr .post {
    background-color: #EDD8C5;
    font-weight: 700;
}
.one_block .t_member tbody tr td {
    padding: 0 10px;
}
.one_block .t_member tbody tr .m_mem {
    padding-left: 20px;
    width: 150px;
}
.one_block .t_member tbody tr .m_mail {
    padding-left: 20px;
    width: 280px;
}


/* =========================================================
   追加設定 (by hirose)
========================================================= */
img#photoImg {        /* for profile photo*/
    display: block;
    float: left; 
    margin: 0px 0px 0px 25px;
    /* padding: 3px; */
    /* border: 1px solid #eee; */
    /* -webkit-box-shadow: 0 10px 6px -6px #777; */
    /* -moz-box-shadow: 0 10px 6px -6px #777; */
    /* box-shadow: 0 10px 6px -6px #777; */
}

.container .sub_block {
    margin: 0px 0px 5px 20px;
}
.container .sub_block li {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
    background-repeat: no-repeat;
    background-position: left 4px;
}
.container .sub_block p {
    margin: 0px 0px 0px 0px;
}

.container #MyProfile {
    margin: 0px 0px 5px 10px;
}

.container p.name {
}

.container img#ORCIDiD {
    display: block;
    float: left;
    margin: 2px 7px 2px 2px;
}

.container img#WoS {
    display: block;
    float: left;
    margin: 2px 7px 2px 2px;
}

.container img#ResearcherID {
    display: block;
    float: left;
    margin: 0px 5px 0px 0px;
}

.container img#Publons {
    display: block;
    float: left;
    margin: 2px 7px 2px 2px;
}

.container #YouTube_embed {
    margin: 0px 80px 0px 80px;
    padding: 0px 0px 0px 0px;
    color: #333;
}

.container #tocDisp {
    margin: 0px 0px 10px 10px;
    padding: 0px 0px 0px 0px;
    color: #333;
}

.container #tocOn, 
.container #tocOff {
    display: inline;
    margin: 0;
}

.container #tocHbar {
    color: #333;
}

.container .cursorOn {
    text-decoration: underline;
    color: #0000c0;
    cursor: pointer;
}

.container .cursorOff {
    text-decoration: none;
    color: #333;
    cursor: auto;
}

.container div.tocSwitch.on {
    text-decoration: underline;
    color: #000000;
}

.container div.tocImg {
    text-align: center;
    line-height: 10px;
    padding: 10px 0px 0px 0px;
}

.container span.tocBr {
    line-height: 10px;
}

/* -- for page top -- */
#pageTop {
    display: none;
    position: fixed;
    right: 0px;
    bottom: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 1000; /* ヘッダー等より上に表示させるため追記 */
}

#pageTop img {
    margin: 0px 0px 0px 0px;
}

#pageTop a:hover {
    text-decoration: none;
    opacity: 0.90;
}

/* =========================================================
   スマホ・タブレット向けレスポンシブ対応
========================================================= */
@media screen and (max-width: 860px) {
    /* ナビゲーションメニューのボタンをスマホで押しやすく */
    nav a {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* コンテナの余白を減らして、スマホ画面を広く使う */
    main.container {
        margin: 15px;
        padding: 15px;
    }

    /* タイトルの文字サイズ調整 */
    .research-topic {
        font-size: 22px;
    }

    /* 画像横のインデントを解除 */
    .figure-indent-box, 
    .indent-box, .indent-box2, .indent-box3, 
    .indent-links {
        margin-left: 0;
        font-size: 0.8em;
    }

    /* メンバー紹介等の横並びを解除して縦積みに */
    .one_block .m_face, .one_block .m_detile {
        float: none;
        width: 100%;
        margin-right: 0;
    }
    
    /* プロフィール写真やアイコンのスマホ用調整 */
    img#photoImg {
        float: none;
        margin: 0 auto 15px auto;
    }
    .container #YouTube_embed {
        margin: 0px; /* スマホではみ出さないように余白を消去 */
    }

    .footer-container {
        flex-direction: column; /* 横並びから「縦並び」に変更 */
        gap: 40px;              /* 上下のブロックの隙間 */
    }

    #footer {
        padding: 40px 0 30px; /* スマホの時は余白を少し詰める */
    }
}



/* =========================================================
   PC用のメニュー表示（デフォルト）
========================================================= */
.menu-toggle {
    display: none; /* PCではハンバーガーボタンを隠す */
}

.nav-list {
    display: flex;        /* PCでは横並びにする */
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* =========================================================
   スマホ用のメニュー表示（768px以下になったら適用）
========================================================= */
@media (max-width: 768px) {
    .main-nav {
        position: relative;
    }

    /* --- ハンバーガーボタンのデザイン --- */
    .menu-toggle {
        display: block; /* スマホでボタンを表示 */
        background: none;
        border: none;
        cursor: pointer;
        padding: 15px 20px;
        margin-left: auto; /* ボタンを右端に寄せる */
        z-index: 100;
    }

    /* 3本線のデザイン */
    .hamburger {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #333;
        position: relative;
        transition: all 0.3s ease;
    }
    .hamburger::before,
    .hamburger::after {
        content: "";
        position: absolute;
        width: 25px;
        height: 3px;
        background-color: #333;
        left: 0;
        transition: all 0.3s ease;
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }

    /* ボタンが開いた時（is-activeクラス付与時）に「×」印にする */
    .menu-toggle.is-active .hamburger { background-color: transparent; }
    .menu-toggle.is-active .hamburger::before { top: 0; transform: rotate(45deg); }
    .menu-toggle.is-active .hamburger::after { top: 0; transform: rotate(-45deg); }

    /* --- 折りたたみメニュー本体のデザイン --- */
    .nav-list {
        display: none; /* 初期状態ではメニューを隠す */
        flex-direction: column; /* 縦並びにする */
        width: 100%;
        background-color: #f8f8f8; /* メニューの背景色 */
        position: absolute; /* 他のコンテンツの上に重なるように配置 */
        top: 100%;
        left: 0;
        padding: 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 少し影をつけて浮かせると綺麗 */
        z-index: 99;
    }

    .nav-list li {
        border-bottom: 1px solid #ddd; /* 項目の間に区切り線を入れる */
    }

    .nav-list a {
        display: block; /* タップしやすいように横幅いっぱいにする */
        padding: 15px 20px;
    }
}



/* =========================================================
　ナビゲーション全体のレイアウト（PCなら横並び、スマホなら縦並びなど柔軟に対応）
========================================================= */
.local-nav2 {
    background-color: #ffffff;
}

.filter-nav2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;            /* 縦方向の中央で揃える */
    padding: 8px 2px;             /* 上下20px、左右30pxの余白（お好みで調整） */
    gap: 10px; /* 各グループの間の余白 */
    margin-bottom: 0px;
}

/* ラベルとボタンのセットを横並びに */
.filter-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ラベル（Region: など）のスタイル */
.filter-label {
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

/* ★ 楕円形の外枠（ピル型） */
.pill-container {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 2px solid #ccc;  /* 外枠の色と太さ */
    border-radius: 50px;     /* ここで楕円形（角丸）にする */
    overflow: hidden;        /* はみ出した背景色を隠す */
}

/* 各ボタン（文字）のスタイル */
.pill-container li {
    margin: 0;
}

.pill-container .filter-btn {
    display: block;
    padding: 5px 8px;       /* ボタンの上下・左右の余白 */
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: all 0.2s ease; /* 色が切り替わる際のアニメーション */
    border-right: 1px solid #ccc; /* 「|」の代わりになる区切り線 */
}

/* 最後のボタン（Both）の右側の区切り線を消す */
.pill-container li:last-child .filter-btn {
    border-right: none;
}

/* ★ 選択されている（Active）時のスタイル */
.pill-container .filter-btn.active {
    background-color: #003366;  /* 選択時の背景色（黒っぽい色） */
    color: #fff;             /* 選択時の文字色（白） */
    font-weight: bold;
}

/* ホバー（マウスを乗せた時）のエフェクト */
.pill-container .filter-btn:hover:not(.active) {
    background-color: #f8f9fa;
}


/* presentations.php の Award 表示のデザイン */
/* 受賞情報のコンテナ（div） */
.award-info {
    color: #000000;             /* 文字色 */
    opacity: 0.7;
    /* font-weight: bold;          /* 太字 */
    margin-top: 2px;            /* 上の余白（前の行との間隔） */
    
    /* ★画像とテキストを綺麗に整列させるための設定（Flexbox） */
    display: flex;
    align-items: flex-start;    /* 画像をテキストの1行目の上端に合わせる */
    gap: 6px;                   /* 画像とテキスト（Award: ...）の間の余白 */
    line-height: 1.4;           /* 行間（2行になった時に見やすくするため） */
}

/* 金カップのアイコン（img） */
.award-icon {
    /* --- サイズ調整 --- */
    height: 1.2em;              /* ★重要：画像の高さを文字の大きさに合わせる */
    width: auto;                /* 横幅は自動調整（アスペクト比を維持） */
    
    /* --- 位置の微調整 --- */
    /* Flexboxで上端に合わせ（flex-start）つつ、
       文字の形（アラインメント）によっては少し上がって見えることがあるため、
       relativeを使って数ピクセル下にずらして中央に見えるように調整します。 */
    position: relative;
    top: 0px;                   /* ★見た目で上下中央に見えるように数px調整してください */
    flex-shrink: 0;             /* テキストが長くても画像が潰れないようにする */
}