@charset "utf-8";

/* ==========================================
   0. デザイン変数（Theme Variables）
   ------------------------------------------
   サイト全体の色、角丸、余白を一括管理します。
   ここを変えるだけでサイト全体のトーンを変更可能です。
   ========================================== */
:root {
    /* メインカラー */
    --main-blue: #224acf;       /* 大学のロゴ等に合わせた基調色 */
    --main-blue-light: #f0f4ff; /* 背景やホバー時の薄い青 */
    --accent-orange: #e67e22;   /* 警告やアクセント用 */
    
    /* テキストカラー */
    --text-dark: #2c3e50;       /* 見出し等の強い文字 */
    --text-main: #4a5568;       /* 本文の標準的な文字 */
    --text-muted: #718096;      /* フッター等の補助的な文字 */
    
    /* UIパーツ */
    --border-color: #e2e8f0;    /* 境界線や区切り線 */
    --bg-light: #f8fafc;        /* サイドバー背景などの薄いグレー */
    --radius: 8px;              /* カードやボタンの共通の角丸 */
    
    /* バッジ専用カラー（視認性向上のため直接定義） */
    --color-invited: #3498db;   /* 招待講演：誠実な青 */
    --color-award: #f1c40f;     /* 受賞：華やかな金 */
    --color-keynote: #e67e22;   /* 基調講演：重厚な琥珀 */
    --color-editors: #e74c3c;   /* 注目記事：警告の赤 */
}

/* ==========================================
   1. ベースレイアウト（Global Styles）
   ------------------------------------------
   サイト全体の土台となる設定です。
   ========================================== */
body {
    margin: 0; padding: 0;
    color: var(--text-main);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    font-size: 16px; 
    line-height: 1.8; /* 行間を広めに取って読みやすくしています */
}

/* 中央寄せのコンテナ */
#container { 
    max-width: 1140px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* メインとサイドバーを横並びにする設定 */
#contents { 
    display: flex; 
    gap: 40px;      /* カラム間の余白 */
    margin-top: 30px; 
}

/* メインコンテンツエリア */
main { 
    flex: 1; 
    min-width: 0;   /* Flexボックス内での文字溢れ防止 */
    padding-bottom: 60px; 
}

/* ==========================================
   2. ヘッダー・スライダー（Header & Hero）
   ------------------------------------------
   トップのロゴエリアと、背後で動くスライダーの設定です。
   ========================================== */
header { position: relative; width: 100%; margin-top: 20px; }

/* スライダーの外枠 */
#mainimg { 
    width: 100%; height: 350px; 
    position: relative; overflow: hidden; 
    background: #1a202c; border-radius: var(--radius); 
}

/* ロゴ・テキストをスライダーの上に浮かせる設定 */
.header-logo-area { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; z-index: 10; pointer-events: none; 
}
.header-logo-area h1 { 
    color: #fff; font-size: 2.6rem; margin: 0; 
    text-shadow: 0 2px 15px rgba(0,0,0,0.6); /* 文字の視認性を確保する影 */
}
.header-logo-area p { 
    color: #fff; font-size: 1.1rem; margin-top: 15px; font-weight: bold; 
    text-shadow: 0 2px 8px rgba(0,0,0,0.6); 
}

/* スライダーのアニメーション定義 */
.slider { width: 100%; height: 100%; position: relative; }
.slide-item { 
    position: absolute; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    opacity: 0; animation: fade 25s infinite; 
}
/* 画像の遅延設定（5枚想定） */
.slide-item:nth-child(1) { background-image: url('../images/header1.jpg'); animation-delay: 0s; }
.slide-item:nth-child(2) { background-image: url('../images/header2.png'); animation-delay: 5s; }
.slide-item:nth-child(3) { background-image: url('../images/header3.jpg'); animation-delay: 10s; }
.slide-item:nth-child(4) { background-image: url('../images/header4.jpg'); animation-delay: 15s; }
.slide-item:nth-child(5) { background-image: url('../images/header5.jpg'); animation-delay: 20s; }

@keyframes fade { 
    0%, 100% { opacity: 0; } 
    5%, 20% { opacity: 1; } 
    25% { opacity: 0; } 
}

/* ==========================================
   3. サイドバー・ナビゲーション（Sidebar）
   ------------------------------------------
   左側のメニューと学会情報等の設定です。
   ========================================== */
#sidebar { width: 240px; flex-shrink: 0; }

/* 縦並びメニュー */
#menubar ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-color); }
#menubar li { border-bottom: 1px solid var(--border-color); }
#menubar li a { 
    display: block; padding: 12px 16px; text-decoration: none; 
    color: var(--text-dark); font-weight: 600; transition: 0.2s; 
}
/* マウスホバー時と現在地の色変更 */
#menubar li a:hover, #menubar li.current a { 
    background-color: var(--main-blue-light); color: var(--main-blue); 
}

/* 学会発表情報ボックス */
#conference { 
    margin-top: 30px; background: var(--bg-light); padding: 15px; 
    border-radius: 4px; border: 1px solid var(--border-color); 
}
#conference h3 { 
    margin: 0 0 10px; font-size: 0.9rem; color: var(--main-blue); 
    border-bottom: 2px solid var(--main-blue); 
}

/* ==========================================
   4. 汎用パーツ（UI Components）
   ------------------------------------------
   サイト内で何度も使い回す共通のデザインパーツです。
   ========================================== */

/* ① 大見出し：ページ内の大きな区切り */
.section-title { 
    background: var(--main-blue); color: #fff; 
    padding: 10px 20px; border-radius: 4px; 
    margin: 40px 0 20px; font-size: 1.3rem; font-weight: bold; 
}

/* ② 小見出し：項目内の詳細分類（年号など） */
.sub-title { 
    border-left: 5px solid var(--main-blue); padding-left: 15px; 
    margin: 35px 0 15px; font-size: 1.15rem; font-weight: bold; color: var(--text-dark); 
}

/* ③ 研究紹介カード：画像を右、文章を左に配置 */
.card-item { 
    display: flex; flex-direction: row-reverse; 
    gap: 30px; margin-bottom: 40px; padding-bottom: 30px; 
    border-bottom: 1px solid var(--border-color); align-items: flex-start; 
}
/* カード内の画像枠 */
.card-photo { 
    width: 260px; flex-shrink: 0; 
    border: 1px solid var(--border-color); padding: 5px; background: #fff; 
}
.card-photo img { 
    width: 100%; height: auto; display: block; 
    aspect-ratio: 16 / 9; object-fit: cover; /* 画像比率を整えるスマート設定 */
}
.card-body { flex: 1; }
.card-label { font-weight: bold; color: var(--main-blue); font-size: 0.9em; margin-bottom: 5px; }
.card-title { font-weight: bold; font-size: 1.2em; margin: 0 0 10px 0; color: var(--text-dark); }

/* ④ 強調ボックス：指針や重要なメッセージ用 */
.info-box { 
    background: var(--main-blue-light); border: 1px solid #d0d9ff; 
    border-left: 6px solid var(--main-blue); padding: 25px; 
    margin: 30px 0; border-radius: 4px; 
}
.info-box h3 { margin-top: 0; color: var(--main-blue); font-size: 1.1rem; margin-bottom: 10px; }

/* ==========================================
   5. 特定のデータリスト（Data Lists）
   ------------------------------------------
   論文リストやリンク集など、特定の情報の並べ方です。
   ========================================== */

/* 実績リスト：自動で「1. 2. 3.」と番号を振る設定 */
.achievement-list { list-style: none; counter-reset: ach-idx; padding: 0; }
.achievement-list li { 
    counter-increment: ach-idx; position: relative; 
    padding: 0 0 15px 35px; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; 
}
.achievement-list li::before { 
    content: counter(ach-idx) "."; position: absolute; left: 0; 
    color: var(--text-main); font-weight: bold; 
}
/* 著者名の強調（下線） */
.achievement-list u { text-decoration: none; border-bottom: 1px solid var(--text-main); font-weight: 500; }

/* リンク集：タイル状に並べる設定 */
.link-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 15px; margin: 20px 0; 
}
.link-card { 
    display: block; padding: 15px; background: #fff; 
    border: 1px solid var(--border-color); border-radius: 6px; 
    text-decoration: none; color: var(--text-dark); transition: 0.3s; 
}
.link-card:hover { border-color: var(--main-blue); background: var(--main-blue-light); transform: translateY(-2px); }
.link-card strong { display: block; color: var(--main-blue); margin-bottom: 3px; }

/* 沿革（Time-line）：左に年、右に内容を並べる */
.history-list { list-style: none; padding: 0; margin: 20px 0; }
.history-list li { display: flex; margin-bottom: 15px; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px; }
.history-date { width: 100px; font-weight: bold; color: var(--main-blue); flex-shrink: 0; }
.history-content { flex: 1; }

/* ==========================================
   6. バッジ（Badges）
   ------------------------------------------
   論文リスト等の横に付くラベルの設定です。
   ========================================== */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 0.75rem; font-weight: bold; margin-left: 8px;
    color: #fff; vertical-align: middle; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.badge-invited { background: var(--color-invited); }
.badge-award   { background: var(--color-award); color: #2c3e50; } /* 受賞は視認性のため暗い文字 */
.badge-keynote { background: var(--color-keynote); }
.badge-editors { background: var(--color-editors); }
.badge-plenary { background: #9b59b6; }

/* ==========================================
   7. フッター・レスポンシブ（Footer & Responsive）
   ------------------------------------------
   ページ最下部と、スマホ表示時の設定です。
   ========================================== */

/* 更新情報(dl)のスタイル調整 */
dl { margin: 0; }
dt { font-weight: bold; color: var(--main-blue); margin-top: 15px; }
dd { margin: 0 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }

footer { 
    text-align: center; padding: 40px 0; 
    border-top: 1px solid var(--border-color); margin-top: 40px; 
    color: var(--text-main); font-size: 0.85rem; 
}

/* スマホ表示（画面幅900px以下）のレイアウト変更 */
@media screen and (max-width: 900px) {
    #contents { flex-direction: column; } /* サイドバーを上に移動 */
    #sidebar { width: 100%; }
    .card-item { flex-direction: column; } /* 画像カードを縦並びに */
    .card-photo { width: 100%; }
    .header-logo-area h1 { font-size: 1.8rem; }
}