body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 縦方向に並べる */
}

header {
    background-color: #00195f;
    padding: 20px;
    display: flex; /* フレックスボックスを使用 */
    justify-content: space-between; /* スペースを均等に分配 */
}

h1 {
    text-align: center;
    color: #fff;
}

RG{
    color: rgb(13, 161, 0);
}

#StudyCategory a{
    color: rgb(32, 155, 255);
}

.button {
    align-self: flex-end; /* ボタンを右上に配置 */
    background-color: #007bff; /* ボタンの色を変更 */
    color: #fff; /* テキストの色を変更 */
    padding: 10px 20px; /* パディングを追加 */
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; /* テキストの下線を削除 */
}

.Line {
    width: 100%; /* 左右に均等に分割 */
}

.box {
    background-color: #f0f0f0; /* ボックスの色を変更 */
    padding: 20px; /* パディングを追加 */
    border-radius: 5px; /* 角を丸くする */
}

.category {
    margin-bottom: 20px;
}

.category ul {
    list-style: none;
    padding: 0;
}

.category li {
    display: inline-block;
    margin-right: 20px;
}

.category a {
    text-decoration: none;
    color: #0cbd56;
}

.content {
    margin-bottom: 20px;
}

.content ul {
    list-style: none;
    padding: 0;
}

.content li {
    margin-bottom: 10px;
}

.content a {
    text-decoration: none;
    color: #007bff;
}

footer {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}