/* style.css (common for index.html and research.html)
   - Put this file next to index.html / research.html
   - You can change theme color and navbar height by editing :root variables.
*/

body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    background-color: #faf9f9;
    padding-top: 70px; /* 70pxはナビバーの高さに合わせて調整 */

}

h1 { font-size: 2.0rem; } /* 一番大きなタイトル（名前など） */
h2 { font-size: 1.5rem; } /* 「研究概要」「経歴」などのセクション */
h3 { font-size: 1.3rem; } /* 中見出し */
h4 { font-size: 1.2rem; 
    border-bottom: 1.5px solid #a3a4a44b;
    padding-bottom: .25rem;
}                           /* 小見出し */
h5 { font-size: 1.1rem; } /* 発表年など */
h1, h2, h3, h4, h5{
    color: #121313;          /* 濃い青（ネイビー）に変更 */
    margin-top: 30px;        /* 上の余白を大きく（以前の倍程度） */
    margin-bottom: 20px;     /* 下の余白も少し広げる */
    line-height: 1.4;     /* 行間を少し広げる */ /* 見出しが2行になっても詰まらないように */
    font-weight: 800;       
}
/* 横幅の調整: custom-width クラスで制御 */
.custom-width{
    max-width: 900px;
    margin: 0 auto;
    background-color: transparent; /* ←変更 */
    padding: 0;                    /* ←変更（必要なら 10px など） */
    box-shadow: none;              /* ←変更 */
    border-radius: 0;              /* ←変更 */
    margin-top: 20px;
  }
  

/* ヘッダーデザイン */
.header-section {
    display: none;
    padding: 60px 0;
    margin-bottom: 40px;
}

.section-title {
    border-left: 4px solid #115b94;
    padding-left: 15px;
    margin: 20px 0 20px 0;
    color: #000000;
}

section{
    background: #fff;
    border-radius: 12px;
    padding: 30px 30px;
    margin: 18px 0; /* セクション同士の「区切り」 */
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
  }
  
/* スマホ画面 */
@media (max-width: 576px) {
    section {
        padding-left: 7px;
        padding-right: 7px;
    }
    .custom-width {
        max-width: 100%;
        padding: 5px;      /* 完全に0にしたければ 0 */
        margin-top: 10px;      /* 上の余白も必要なければ */
      }
}  
@media (max-width: 576px) {
    body { font-size: 0.9rem; } /* 全体を少し小さく（好みで 0.90〜0.95） */
  
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1.05rem; }
    h5 { font-size: 1.0rem; }
}
@media (max-width: 991.98px) {
    #nav .navbar-nav {
      width: 100%;
      align-items: flex-end;  /* liごと右端へ */
    }
    #nav .nav-link {
      text-align: right;      /* 文字も右寄せ */
    }
  }


  
.keyword-badge {
    background-color: #e5eefe;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    margin: 5px;
    font-size: 0.9em;
}

li {
    margin-bottom: 8px; /* この数値を大きくすると間隔がさらに広がります */
}

.timeline-item {
    border-left: 3px solid #dbdada; /* 線を引く */
    padding-left: 25px;             /* 文字との間隔 */
    padding-bottom: 25px;           /* 下の項目まで線を伸ばすために余白を取る */
    position: relative;             /* 丸の位置基準 */
    margin-bottom: 0;               /* 項目ごとの隙間をゼロにして線をつなげる */
}

/* 丸ポチの設定 */
.timeline-item::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #4d8dbe;
    border-radius: 50%;
    position: absolute;
    left: -7px; /* 線の真上に配置 (線の太さ2pxの中心) */
    top: 5px;   /* 文字の1行目に合わせる */
}

.publication {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    border-left: 3px solid #9caab8;
}

.award {
    background-color: #fff8e1;
    padding: 15px;
    border-left: 4px solid #ffc107;
    margin-bottom: 15px;
}

footer {
    margin-top: 60px;
    padding: 30px 0;
    text-align: center;
    font-size: 0.9em;
    color: #666;
    border-top: 1px solid #eee;
}

a { color: #1e60ca; text-decoration: underline; }
a:hover { color: rgb(160, 52, 9); }

:root { --nav-bg: #115b94; }                 /* ←ここを好きな色に変える */
.bg-nav { background: var(--nav-bg)!important; }

.navbar-50 .nav-link { position: relative; top: 5px; color: #ffffff;}
.navbar .nav-link:hover {
    color: #bdbcba !important;         /* ホバー時の文字色（例：オレンジ） */
    transition: color .15s ease-in-out; /* ふわっと変える */
}
.navbar-50 .navbar-collapse { background: var(--nav-bg); } /* 折りたたみ展開時の背景も統一 */
.navbar-40 { height: 40px; padding: 0; }
.navbar-40 .navbar-brand, .navbar-40 .nav-link { padding-top: 0; padding-bottom: 0; line-height: 40px; }