/* -------------------------
 * 基本設定
 * ------------------------- */
body {
    font-family: sans-serif;
    /* フォントを指定 */
    line-height: 1.6;
    /* 行の高さを指定 */
    background-color: #f4f4f4;
    /* 背景色を薄いグレーに */
    margin: 0;
    padding: 0;
}

/* リンクの基本スタイル */
a {
    color: #007bff;
    /* リンクの色 */
    text-decoration: none;
    /* 下線を消す */
}

a:hover {
    text-decoration: underline;
    /* ホバー時に下線を表示 */
}


/* -------------------------
 * レイアウト
 * ------------------------- */

/* サイト全体を中央寄せにし、最大幅を指定 */
.container {
    max-width: 800px;
    /* コンテンツの最大幅 */
    margin: 0 auto;
    /* 上下0、左右autoで中央寄せ */
    padding: 20px;
    /* 内側の余白 */
}


/* -------------------------
 * 各パーツのスタイル
 * ------------------------- */

/* ヘッダー */
header {
    text-align: center;
    /* テキストを中央揃え */
    padding: 20px 0;
    border-bottom: 2px solid #eaeaea;
    /* 下線 */
    margin-bottom: 30px;
}

header h1 {
    margin: 0;
}

header h1 a {
    color: #333;
    /* タイトルの色 */
    text-decoration: none;
}


/* 記事（article） */
article {
    background-color: #ffffff;
    /* 記事エリアの背景を白に */
    border: 1px solid #ddd;
    /* 記事の枠線 */
    border-radius: 5px;
    /* 角を丸くする */
    padding: 25px;
    /* 内側の余白 */
    margin-bottom: 30px;
    /* 記事と記事の間の余白 */
}

article h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

article h2 a {
    color: #333;
    /* 記事タイトルの色 */
}

/* 投稿日 */
.post-date {
    color: #888;
    /* 文字色をグレーに */
    font-size: 0.9em;
    /* 少し小さく */
    margin-bottom: 15px;
}


/* フッター */
footer {
    text-align: center;
    /* テキストを中央揃え */
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid #eaeaea;
    /* 上線 */
    color: #777;
    font-size: 0.9em;
}
/* -------------------------
 * 表 (table) のスタイル
 * ------------------------- */

/* 表がはみ出た場合に横スクロールさせるためのラッパー */
.table-container {
    overflow-x: auto;
    /* 横方向にはみ出たらスクロールバーを表示 */
    margin-bottom: 20px;
    /* 表の下に余白 */
}

table {
    width: 100%;
    /* 親要素に対して100%の幅 */
    border-collapse: collapse;
    /* 罫線を1本線にする */
    min-width: 600px;
    /* 表の最小幅を指定（スマホ対応のため） */
}

/* th (見出しセル) と td (データセル) の共通スタイル */
th,
td {
    border: 1px solid #ccc;
    /* 罫線 */
    padding: 10px;
    /* セル内の余白 */
    text-align: left;
    /* 文字を左揃え */
}

/* th (見出し行) の背景色 */
thead th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* 1行おきに背景色を変える (シマシマ模様) */
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.csvlist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}
/* -------------------------
 * 基本設定
 * ------------------------- */
body {
    font-family: sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
h1 {
    text-align: center;
}

/* -------------------------
 * 表 (table) のスタイル
 * ------------------------- */

/* 表がはみ出た場合に横スクロールさせるためのラッパー
  (JavaScriptがこのクラスを自動で付与します) 
*/
.table-container {
    overflow-x: auto; /* 横方向にはみ出たらスクロールバーを表示 */
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ffffff;
}

table {
    width: 100%;               /* 親要素に対して100%の幅 */
    border-collapse: collapse; /* 罫線を1本線にする */
    min-width: 600px;          /* 表の最小幅を指定 (スマホ対応のため) */
}

/* th (見出しセル) と td (データセル) の共通スタイル */
th, td {
    border-bottom: 1px solid #ccc; /* 下線のみ */
    padding: 12px 15px;         /* セル内の余白を少し多めに */
    text-align: left;       /* 文字を左揃え */
}

/* th (見出し行) */
thead th {
    background-color: #f4f4f4;
    font-weight: bold;
    border-bottom-width: 2px; /* 見出しの下線だけ少し太く */
}

/* 1行おきに背景色を変える (シマシマ模様) */
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ホバー時に色を変える */
tbody tr:hover {
    background-color: #f0f0f0;
}