:root {
  --primary:    #4a90e2;   /* 落ち着いたブルー */
  --primary-dark: #357ab8; /* ホバー用 */
  --background: #f5f7fa;   /* 淡いブルーグレー */
  --surface:    #ffffff;
  --text:       #333333;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--background);
}

/* ヘッダー・フッター共通 */
header,
footer {
  background-color: var(--primary);
  color: #fff;
  text-align: center;
  padding: 1em;
}

/* メインコンテンツ */
main {
  max-width: 800px;
  margin: 2em auto;
  padding: 1em;
  background-color: var(--surface);
}

/* リスト */
ul {
  list-style: none;
}

li {
  padding: 0.5em 0;
}

/* リンク */
a {
  color: var(--primary);
  text-decoration: none;
}

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

th,
td {
  border: 1px solid #ddd;
  padding: 0.2em;
  text-align: left;
}

th {
  background-color: var(--primary);
  color: #fff;
}

/* セレクトメニュー */
select {
    padding: 8px 8px;
    margin-bottom: 0.3em;
}

/* 一覧系 */
.char-group {
  margin-bottom: 0.1em;           /* タイトル間の余白 */
  border: 1px solid #ccc;         /* グループ枠線 */
  border-radius: 6px;
  padding: 0.1em;
  background-color: var(--surface); /* 白背景で浮かせる */
}

.char-group-title {
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.3em;
}

.char-list {
  padding: 0.1em;             /* キャラ一覧の内側余白 */
  background-color: #f0f4f8;      /* 淡いブルーグレーで箱感 */
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 0.1em;
}

.char-option {
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 0.1em;
}

/* ボタン共通（検索ボタンなど） */
button,
.back-button,
.char-search-btn {
  display: inline-block;
  padding: 0.5em 0.6em;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none; /* aタグ用 */
  margin-bottom: 0.8em;
  background-color: var(--primary); /* 背景色を共通で定義 */
}

/* --------------------
 * リンクボタンのスタイル（アウトラインデザイン）
 * -------------------- */
.btn-link {
  /* 中央寄せのためのスタイルを追加 */
  display: block; /* ブロック要素にして幅いっぱいに広げる */
  margin: 0 auto; /* 左右のマージンをautoにして中央寄せ */
  
  /* ここで共通スタイルを上書き */
  padding: 0px 0px;
  margin: 1px 1px;
  border: 2px solid var(--primary);
  text-align: center;
  font-size: 0.9em;
  min-width: 40px;
  background-color: transparent; /* 背景を透明にする */
  color: var(--primary); /* 文字色をメインカラーに */
}
.btn-link:visited {
  color: var(--primary); /* 訪問済みでも文字色は変わらないように */
}

/* 戻るボタン用コンテナ */
.back-button-container {
  text-align: center;
  margin-top: 2em;
}

/* レスポンシブ */
@media (max-width: 600px) {
  header,
  footer {
    padding: 0.5em;
  }

  main {
    margin: 1em;
    padding: 0.5em;
  }

  table,
  th,
  td {
    font-size: 0.9em;
  }
}