/* ================================
   GLOBAL（落ち着いた科学系フォント＋大きめ）
   ================================ */
body {
  background: #f4f7fa;
  font-family: "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;          /* ← 全体フォントを大きめに */
  line-height: 1.7;         /* ← 読みやすさ向上 */
  color: #333;
}



/* ================================
   HERO SECTION（深みのある海色＋端正フォント）
   ================================ */
.hero {
  padding: 4.5rem 2rem;
  background: linear-gradient(
    135deg,
    #005a78,   /* 明るめの深海ブルー */
    #0083a3,   /* 沿岸の青緑（爽やか） */
    #4fb7c8    /* 光が差し込む明るい海色 */
  );
  color: #ffffff;
  text-align: center;
  border-bottom: 4px solid rgba(255,255,255,0.18);
}

/* テキストブロック（読みやすい幅） */
.hero-text {
  max-width: 900px;
  margin: 0 auto;
}

/* ページタイトル（大きすぎず、科学系の端正さ） */
.hero-text h1 {
  font-size: 2.8rem;        /* ← 適正に大きく（カードより上位） */
  font-weight: 650;         /* ← 少し太めで端正 */
  letter-spacing: 0.4px;
  margin-top: -0.5rem;
  margin-bottom: 1.2rem;
  color: white;
}

/* サブテキスト（英語＋日本語が自然に見えるサイズ） */
.hero-text p {
  font-size: 1.5rem;       /* ← 少し大きめに戻す */
  line-height: 1.85;
  margin: 0.5rem 0;
  opacity: 0.96;            /* ← 柔らかく読みやすい */
}


/* ================================
   GRID（横並び）
   ================================ */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* ← カード幅少し広げる */
  gap: 2rem;
  padding: 2.5rem 1.5rem;
}

/* ================================
   CARD（落ち着いた白＋淡い海色の質感）
   ================================ */
.research-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 2rem 1.8rem;     /* ← 余白を増やして高級感 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;

  /* 海の反射のような淡い模様（控えめ） */
  background-image: radial-gradient(circle at top right, rgba(0,120,160,0.06), transparent 70%);
}

/* Hover（控えめに浮く） → 無効化 */
.research-card:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* ================================
   カード上部のアクセント（細い色帯）
   ================================ */
.research-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: #0077b6; /* デフォルト（サンマ） */
}

/* テーマ別カラー（落ち着いた色味） */
.saury::before  { background: #0077b6; }
.tuna::before   { background: #00897b; }
.whale::before  { background: #5a4cff; }
.turtle::before { background: #e85d4f; }

/* ================================
   TITLE（フォント大きめ・線なし）
   ================================ */
.research-card h2 {
  margin: 0.6rem 0 1rem;
  font-size: 1.8rem;       /* ← タイトルを大きめに */
  font-weight: 600;
  border: none;             /* 線を完全に消す */
}

/* タイトル色だけテーマ別（落ち着いた色） */
.title-saury   { color: #005f8f; }  /* サンマ：沿岸の青 */
.title-tuna    { color: #00796b; }  /* マグロ：深緑青 */
.title-whale   { color: #4a3cff; }  /* 鯨類：青紫 */
.title-turtle  { color: #d14a3c; }  /* ウミガメ：赤系 */
.title-mammal  { color: #5a6bb3; }  /* 海棲哺乳類：落ち着いた青灰 */
.title-others  { color: #4f8a8a; }  /* その他：青緑の中間色 */
.title-ecosys  { color: #3b7f5f; }  /* 生態系：深い緑 */
.title-model   { color: #5566aa; }  /* モデリング：青系の中間色 */


/* ================================
   TEXT（フォント大きめ）
   ================================ */
.research-card p {
  margin: 0 0 1rem;
  line-height: 1.7;
  font-size: 1.2rem;          /* ← 本文も少し大きめ */
}

/* ================================
   PAGE WIDTH（GitHub Pages の制限を上書き）
   ================================ */
.page-content {
  max-width: 2000px !important;
}

.wrapper {
  max-width: 2000px !important;
}