/*
==================================================
Interactive Media Design Laboratory Website
==================================================

File        : style.css
Description : Common stylesheet
Author      : Chika Kanesaki
Created     : 2026-10-26
Last Update : 2026-10-26
Updated By  : 
==================================================
*/

/* ========================================
   1. 全体の基本設定
======================================== */

/* 要素の幅にpaddingとborderを含める */
* {
  box-sizing: border-box;
}

/* ページ全体 */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;

  /* 本文が短い場合もフッターを下に配置 */
  display: flex;
  flex-direction: column;

  background-color: #fafafa;
  color: #333333;
  font-family: sans-serif;
  font-size: small;
  line-height: 1.6;
}

/* 通常のリンク色 */
a {
  color: #2681c8;
}

/* 見出し・段落の上余白 */
h1,
h2,
p {
  margin-top: 0;
}

/* セクション間の余白 */
section {
  margin-bottom: 40px;
}

/* ========================================
   2. 上部ヘッダー（追従しない）
======================================== */

/* ロゴと右側リンクを横並び・下揃え */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;

  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 40px;
}

/* ロゴ画像 */
.site-logo img {
  display: block;
  height: 100px;
  max-width: 100%;
  width: auto;
}

/* 日本語・Localなどのリンク */
.header-links {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

/* ========================================
   3. 追従するナビゲーション
======================================== */

.sticky-nav {
  /* スクロール時に画面上部へ固定 */
  position: sticky;
  top: 0;
  z-index: 1000;

  /* リンクを中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 75px;

  width: 100%;
  background-color: #454545;
  padding: 15px 20px;
  border-bottom: 1px solid #fafafa;
  text-align: center;
}

/* ナビゲーション内のリンク */
.sticky-nav a {
  color: #fafafa;
  font-weight: bold;
  text-decoration: none;
}

/* ========================================
   4. メインコンテンツ
======================================== */

main {
  /* コンテンツを中央配置 */
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 20px;

  /* フッターをページ下部へ押し下げる */
  flex: 1;
}

/* 研究室の紹介文 */
.main-info {
  text-align: center;
}

/* ========================================
   5. 研究分野一覧
======================================== */

/* PCでは上段2つ・下段3つ */
.research-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 60px 30px;

  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 通常は3列配置 */
.research-item {
  grid-column: span 2;
  text-align: center;
  min-width: 0;
}

/* 最初の2項目だけ2列配置 */
.research-item:nth-child(1),
.research-item:nth-child(2) {
  grid-column: span 3;
}

/* 研究分野の丸い画像 */
.research-item img {
  width: 160px;
  height: 160px;
  border-radius: 100%;
}

/* 研究分野名 */
.research-item h2 {
  color: #333333;
  font-size: 20px;
  margin: 20px 0;
}

/* More Infoリンク */
.research-item a {
  color: #333333;
  text-decoration: none;
  font-weight: bold;
}

/* ========================================
   6. News・Links
======================================== */

/* PCではNewsを広く、Linksを狭く */
.content-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;

  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 見出し */
.news h2,
.links h2 {
  margin-top: 0;
  margin-bottom: 30px;
}

.news h3 {
  margin-top: 35px;
  margin-bottom: 20px;
}

/* Newsのリスト */
.news ul {
  padding-left: 30px;
  list-style-type: square;
}

.news li {
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Linksのリスト */
.links ul {
  list-style: none;
  padding: 0;
}

.links li {
  margin-bottom: 20px;
  line-height: 1.6;
}

/* News内の画像 */
.news-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 15px auto;
}

/* 長い文章による横幅のはみ出し防止 */
.news,
.links {
  min-width: 0;
}

/* ========================================
   7. フッター
======================================== */

/* 画面幅いっぱいのフッター */
footer,
.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;

  background-color: #454545;
  color: #fafafa;
  text-align: center;
}

/* フッター内の余白 */
.site-footer {
  padding: 30px 20px;
}

/* フッターの画像 */
.site-footer img {
  height: 100px;
  width: auto;
  object-fit: contain;
}

/* ========================================
   8. スマートフォン対応
======================================== */

@media screen and (max-width: 768px) {
  /* ヘッダー */
  .site-header {
    padding: 20px;
    gap: 15px;
  }

  .site-logo {
    min-width: 0;
  }

  .site-logo img {
    width: 200px;
    height: auto;
  }

  .header-links {
    gap: 10px;
  }

  .header-links a {
    font-size: 14px;
  }

  /* ナビゲーションの間隔を狭くする */
  .sticky-nav {
    gap: 15px;
    padding: 12px;
  }

  /* メインコンテンツ */
  main {
    padding: 20px;
  }

  /* 研究分野を縦一列にする */
  .research-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .research-item,
  .research-item:nth-child(1),
  .research-item:nth-child(2) {
    grid-column: auto;
  }

  .research-item img {
    width: 140px;
    height: 140px;
  }

  .research-item h2 {
    font-size: 20px;
  }

  /* NewsとLinksを縦一列にする */
  .content-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 20px;
  }

  .news h2,
  .links h2 {
    margin-bottom: 20px;
  }
}