table {
    width: 90%;
    max-width: 1700px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    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: 250px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* キャラクター名 */
th[data-column="character-name"],
td[data-column="character-name"] {
  display: none;
  max-width: 400px;
  min-width: 150px;
  width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 種別列の最大幅を設定 */
th[data-column="type"],
td[data-column="type"] {
min-width: 85px;
text-overflow: ellipsis;
white-space: nowrap;
}

/* 開始日列の最大幅を設定 */
th[data-column="date"],
td[data-column="date"] {
max-width: 370px; 
text-overflow: ellipsis;
white-space: nowrap;
}
.date-cell {
    border-right: none;
}

/* テキストが溢れた場合の表示設定 */
.column-character, .column-type, .column-date {
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 開始日列のスタイル */
.date-cell {
    border-right: none;
}

.merged-header {
    border: 1px solid ddd;
    text-align: center;
}
/* 最後の列の右側に罫線を追加 */
tbody tr td:last-child {
    border-right: 1px solid ddd;
}

/* ソート */
.sort-link {
text-decoration: none;
color: black;
font-weight: bold;
margin: 0 5px;
}
.icon {
    display: inline-block;
    font-size: 1.2em;
}
.icon-asc::after {
    content: '△▼'; /* 昇順のアイコン */
}

.icon-desc::after {
    content: '▲▽'; /* 降順のアイコン */
}
.center-icon-cell {
text-align: center; /* テーブルセル内のコンテンツをセンターに配置 */
}
.center-icon {
    display: block;
    margin: 0 auto; /* 画像自体をセンターに配置 */
    width: 50px; /* アイコンの幅を指定 */
    height: 50px; /* アイコンの高さを指定 */
    border-radius: 10%; /* 丸みを付ける。 */
}

/* スマホ用のレイアウト */
@media screen and (max-width: 768px) {
    table {
        width: 90%;
        margin-left: 10px;
    }
}