table {
    width: 90%;
    max-width: 1700px;
    margin-left: 20px;
    margin-right: 20px;
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid #ddd;
    max-width: 370px;
}

th,
td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    text-align: center;
}

/* キャラクター列の最大幅を設定 */
th[data-column="character"],
td[data-column="character"] {
    max-width: 200px;
    text-overflow: ellipsis;
    /* 溢れたテキストを省略表示 */
    white-space: nowrap;
    /* テキストを折り返さずに1行で表示 */
}

/* キャラ名列の最大幅を設定 */
th[data-column="character_name"],
td[data-column="character_name"] {
    min-width: 120px;
}

/* ランキング列の最大幅を設定 */
th[data-column="ranking"],
td[data-column="ranking"] {
    min-width: 40px;
    text-align: center;
}

/* 得票数列の最大幅を設定 */
th[data-column="votes"],
td[data-column="votes"] {
    min-width: 100px;
    text-align: center;
}

.icon {
    display: inline-block;
    font-size: 1.2em;
}

.center-icon-cell {
    text-align: center;
    /* テーブルセル内のコンテンツをセンターに配置 */
}

.center-icon {
    display: block;
    margin: 0 auto;
    /* 画像自体をセンターに配置 */
    width: 50px;
    /* アイコンの幅を指定 */
    height: 50px;
    /* アイコンの高さを指定 */
    border-radius: 10%;
    /* 丸みを付ける。 */
}

.gameimage {
    width: 720px;
    padding-left: 30px;
    padding-bottom: 20px;
}

.pp-archive{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin:.5rem 0 1.25rem;
}

.pp-year-link{
  display:inline-block;
  padding:.45rem .9rem;
  border:2px solid #1e88e5;
  border-radius:.6rem;
  background:#ffffff;
  color:#1565c0;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .06s ease;
}

.pp-year-link:hover{
  background:#e3f2fd;
  border-color:#1565c0;
  color:#0d47a1;
  transform: translateY(-1px);
}

.pp-year-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 .2rem rgba(30,136,229,.25),
             0 0 0 .35rem rgba(13,71,161,.2);
}

.pp-year-link.is-active,
.pp-year-link[aria-current="page"]{
  background:#1e88e5;
  border-color:#1e88e5;
  color:#fff;
  cursor:default;
  pointer-events:none;
  box-shadow:0 2px 10px rgba(30,136,229,.2) inset;
}

.pp-year-link:active{
  transform: translateY(0);
}

/* スマホ用のレイアウト */
@media screen and (max-width: 768px) {

    /* 縮小画像のスタイル */
    .gameimage {
        width: 85%;
        cursor: pointer;
        padding: 0 20px 10px;
    }
}