/* styles-link.css */
/* リンクページ用のスタイルシート */

body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* フォントファミリーを指定。最初に'Helvetica Neue'を使用し、利用できない場合はArialや一般的なsans-serifフォントにフォールバック */
    line-height: 1.0; /* 行の高さを文字サイズの1.0倍に設定 */
    color: #333; /* テキストの色を暗めのグレー(#333)に設定 */
    max-width: 1200px; /* コンテンツの最大幅を1200ピクセルに制限 */
    margin: 0 auto; /* 上下のマージンを0に、左右のマージンを自動に設定してコンテンツを中央揃え */
    padding: 20px; /* 内部の余白を全方向に20ピクセル設定 */
    background-color: #f9f9f9; /* 背景色を明るいグレー(#f9f9f9)に設定 */
}

h1 {
    color: #6441a5; /* 見出しの色をTwitchの紫(#6441a5)に設定 */
    text-align: center; /* テキストを中央揃えに */
    margin-bottom: 10px; /* 下部のマージンを10ピクセルに設定 */
    font-size: 2.0em; /* フォントサイズを標準の2.0倍に設定 */
}

h2 {
    color: #6441a5; /* 見出しの色をTwitchの紫に設定 */
    border-bottom: 2px solid #6441a5; /* 下部に2ピクセルの実線(紫色)を追加 */
    padding-bottom: 10px; /* 下部の内部余白を10ピクセルに設定 */
    margin-top: 20px; /* 上部のマージンを20ピクセルに設定 */
}

.clip-table {
    width: 100%; /* テーブルの幅を親要素の100%に設定 */
    border-collapse: collapse; /* テーブルのセル間の境界線を結合 */
    margin-bottom: 10px; /* 下部のマージンを10ピクセルに設定 */
    background-color: white; /* 背景色を白に設定 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 影を追加して立体感を出す */
}

.clip-table th {
    background-color: #6441a5; /* 背景色をTwitchの紫に設定 */
    color: white; /* テキスト色を白に設定 */
    padding: 10px 15px; /* 内部余白を上下10px、左右15pxに設定 */
    text-align: left; /* テキストを左揃えに */
    font-size: 0.8em; /* フォントサイズを標準の0.8倍に設定 */
}

.clip-table td {
    padding: 10px 15px; /* 内部余白を上下10px、左右15pxに設定 */
    border-bottom: 1px solid #ddd; /* 下部に1ピクセルの実線(薄いグレー)を追加 */
    font-size: 0.8em; /* フォントサイズを標準の0.8倍に設定 */
}

.clip-table tr:hover {
    background-color: #f1f1f1; /* 背景色を薄いグレーに変更してハイライト */
}

.clip-link {
    display: inline-block; /* インラインブロック要素として表示 */
    color: #6441a5; /* テキスト色をTwitchの紫に設定 */
    text-decoration: none; /* テキストの下線を削除 */
    padding: 5px 10px; /* 内部余白を上下5px、左右10pxに設定 */
    border: 1px solid #6441a5; /* 1ピクセルの実線(紫色)の枠を追加 */
    border-radius: 4px; /* 枠の角を4ピクセルの半径で丸く */
    transition: all 0.3s; /* すべてのプロパティの変化を0.3秒かけてアニメーション */
}

.clip-link:hover {
    background-color: #6441a5; /* 背景色をTwitchの紫に変更 */
    color: white; /* テキスト色を白に変更 */
}

.category-container {
    margin-bottom: 20px; /* 下部のマージンを20ピクセルに設定 */
}

.empty-notice {
    color: #999; /* テキスト色を中間のグレー(#999)に設定 */
    font-style: italic; /* フォントをイタリック体に */
    text-align: center; /* テキストを中央揃えに */
    padding: 20px; /* 内部余白を全方向に20ピクセル設定 */
}

.date {
    white-space: nowrap; /* テキストを折り返さずに一行で表示 */
}

.clip-title {
    font-weight: bold; /* フォントを太字に設定 */
}
/* カテゴリ列のスタイル */
.clip-table td:nth-child(4) {
/*    background-color: #f5f0ff; /* 薄い紫色の背景 */
    font-size: 0.9em;
    text-align: left;
}

/* カテゴリ名に応じた色分け（オプション） */
/* .category-tag { */
/*     display: inline-block; */
/*     padding: 2px 6px; */
/*     border-radius: 3px; */
/*     font-size: 0.85em; */
/* } */

/* .category-tag.タルコフ { */
/*     background-color: #e8f5e9; 薄い緑 */
/*     color: #2e7d32; */
/* } */

/* .category-tag.ストグラ { */
/*     background-color: #e3f2fd; 薄い青 */
/*     color: #1565c0; */
/* } */
footer {
    margin-top: 50px; /* 上部のマージンを50ピクセルに設定 */
    text-align: center; /* テキストを中央揃えに */
    padding: 20px; /* 内部余白を全方向に20ピクセル設定 */
    border-top: 1px solid #ddd; /* 上部に1ピクセルの実線(薄いグレー)を追加 */
}

footer a {
    color: #6441a5; /* テキスト色をTwitchの紫に設定 */
    text-decoration: none; /* テキストの下線を削除 */
    padding: 5px 10px; /* 内部余白を上下5px、左右10pxに設定 */
    border: 1px solid #6441a5; /* 1ピクセルの実線(紫色)の枠を追加 */
    border-radius: 4px; /* 枠の角を4ピクセルの半径で丸く */
    transition: all 0.3s; /* すべてのプロパティの変化を0.3秒かけてアニメーション */
}

footer a:hover {
    background-color: #6441a5; /* 背景色をTwitchの紫に変更 */
    color: white; /* テキスト色を白に変更 */
}