/* 全体のスタイル */
body {
    display: flex;
    flex-direction: column; /* ヘッダーとコンテンツを縦並びに */
    margin: 0;
    background-color: #282C34;
    color: #FFFFFF;
    min-height: 100vh; /* 全体の高さを確保 */
    box-sizing: border-box;
}

.tag {
    background-color: #f0f0f0; /* タグの背景色 */
    color: #333; /* タグの文字色 */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 3px; /* 角を丸める */
    margin-right: 5px; /* タグ間の余白 */
    display: inline-block; /* インラインブロック要素として表示 */
}

.container {
    display: flex;
    flex: 1; /* ヘッダー以外の部分をフレックスボックスにする */
    align-items: stretch; /* サイドバーとコンテンツエリアを同じ高さにする */
    box-sizing: border-box;
  flex-wrap: nowrap; /* 子要素が折り返さないように設定 */
  width: 100%;
  overflow-x: hidden; /* 横スクロールを防止 */
  min-height: 100vh; /* 高さを画面全体に揃える */

}

.content {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
min-width: 0; /* フレックス要素がはみ出さないようにする */
overflow-x: hidden; /* 横スクロールを防止 */
flex-grow: 1; /* コンテンツ領域を可変に */

}

aside.sidebar {
    width: 200px;
    background-color: #333;
    color: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* サイドバー内の要素を上下に分割 */
flex-shrink: 0; /* サイドバーを縮小させない */
overflow-y: auto; /* 必要に応じて縦スクロールを許可 */
box-sizing: border-box; /* パディングを含めてサイズを計算 */
}

h1 {
    border-left: 5px solid #555; /* 左端に太めの縦ラインを追加 */
    padding-left: 15px; /* テキストと縦ラインの間にスペースを作る */
    border-bottom: 2px solid #555; /* 見出しの下に太めのラインを追加 */
    padding-bottom: 10px; /* 下のラインとテキストの間にスペースを作る */
    margin-bottom: 20px; /* 下部に余白を追加して、他の要素との間隔を確保 */
    color: #FFFFFF; /* 見出しのテキスト色を白色に設定 */
}

h2 {
    border-bottom: 1px solid #555; /* 見出しの下に細めのラインを追加 */
    padding-bottom: 8px; /* ラインとテキストの間にスペースを作る */
    margin-bottom: 15px; /* 下部に余白を追加して、他の要素との間隔を確保 */
    color: #FFFFFF; /* 見出しのテキスト色を白色に設定 */
}

img, table {
    width: 100%;
    height: auto;
    max-width: 100%;
}


pre, code {
    font-family: 'Courier New', Courier, monospace; /* 等幅フォントを設定 */
    font-size: 14px; /* フォントサイズを設定 */
}

code {
    background-color: black; /* コードブロック全体の背景色をカスタマイズ */
    color: red; /* コードのテキスト色 */
}

pre {
    background-color: #282C34; /* コードブロック全体の背景色をカスタマイズ */
    padding: 10px; /* コードブロックの内側余白を設定 */
    border-radius: 4px; /* コードブロックの角を丸める */
    overflow-x: auto; /* 長いコードがあっても横スクロールを可能にする */
    overflow-y: hidden; /* 垂直方向のスクロールを非表示にする（必要に応じて調整） */
    white-space: pre; /* コードの改行を保持 */
    max-width: 100%; /* 親コンテナの幅を超えないように設定 */
    box-sizing: border-box; /* パディングを含めた幅を計算 */
}


/* 長いテキストを折り返す設定 */
p, ul, li, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* 改行を許可 */
}

/* 画像の幅を制限 */
img {
    max-width: 100%;
    height: auto; /* アスペクト比を維持 */
}


a {
    background-color: #808080; /* 背景色を灰色に設定 */
    color: #FFFFFF; /* テキストを白色に設定 */
    text-decoration: none; /* ハイパーリンクの下線を除去 */
    padding: 2px 4px; /* 内側余白を設定 */
    border-radius: 4px; /* 角を丸める */
    line-height: 1.5; /* 行間を確保 */
    margin: 2px 0; /* 上下の余白を設定して行間を確保 */
}

a:hover {
    background-color: #FFFFFF; /* ホバー時の背景色を白色に設定 */
    color: #282C34; /* ホバー時のテキスト色を設定 */
}

p {
    text-indent: 1rem;
}

blockquote {
    background-color: #333; /* ダークグレーの背景色 */
    border-left: 5px solid #555; /* 左側に太めのラインを追加 */
    color: #FFFFFF; /* テキストを白色に設定 */
    padding: 15px 20px; /* 内側の余白を設定 */
    margin: 20px 0; /* 上下の余白を設定 */
    font-style: italic; /* イタリック体にすることで引用らしさを強調 */
    border-radius: 5px; /* 角を少し丸める */
}

blockquote p {
    margin: 0; /* 引用内の段落の余白を削除 */
}

table {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #FFFFFF;
}

table th, table td {
    border-bottom: 1px solid #FFFFFF;
    padding: 8px;
    text-align: left;
}

table th {
    background-color: #3C4048;
}

table tr:nth-child(even) {
    background-color: #32363E;
}

                    /* Radio ボタンのカスタマイズ */
                    input[type="radio"] {
                        appearance: none;
                        width: 16px;  /* サイズを16pxに変更 */
                        height: 16px;
                        border: 2px solid #FFFFFF;
                        border-radius: 50%;
                        outline: none;
                        cursor: pointer;
                        transition: background-color 0.3s ease, border-color 0.3s ease;
                    }

                    input[type="radio"]:checked {
                        background-color: #61AFEF;
                        border-color: #61AFEF;
                    }

                    /* チェックボックスとテキストのズレを修正する */
                    input[type="checkbox"] {
                        appearance: none;
                        width: 16px;
                        height: 16px;
                        border: 2px solid #FFFFFF;
                        border-radius: 3px;
                        outline: none;
                        cursor: pointer;
                        transition: background-color 0.3s ease, border-color 0.3s ease;
                        vertical-align: middle; /* チェックボックスをテキストに対して垂直に中央揃え */
                        margin-right: 8px; /* チェックボックスとテキストの間に余白を追加 */
                    }

                    input[type="checkbox"]:checked {
                        background-color: #61AFEF;
                        border-color: #61AFEF;
                    }

                    /* ラベルのスタイルを改善 */
                    label {
                        vertical-align: middle; /* ラベルをチェックボックスに対して中央揃え */
                        font-size: 16px; /* 必要に応じてフォントサイズを調整 */
                        color: #FFFFFF; /* テキストの色を白に統一 */
                        margin: 0; /* 余白をリセット */
                    }

                    /* プルダウンメニューのカスタマイズ */
                    select {
                        background-color: #282C34;
                        color: #FFFFFF;
                        border: 1px solid #FFFFFF;
                        padding: 6px 10px;  /* パディングを調整 */
                        border-radius: 5px;
                        font-size: 14px;  /* フォントサイズを少し小さく */
                        appearance: none;
                        cursor: pointer;
                        transition: background-color 0.3s ease, border-color 0.3s ease;
                    }

                    select:hover {
                        background-color: #3C4048;
                    }

                    select:focus {
                        outline: none;
                        border-color: #61AFEF;
                    }

                    /* ボタンのカスタマイズ */
                    button {
                        background-color: #61AFEF;
                        color: #FFFFFF;
                        border: none;
                        padding: 8px 16px;  /* パディングを少し小さく */
                        font-size: 14px;  /* フォントサイズを調整 */
                        border-radius: 5px;
                        cursor: pointer;
                        transition: background-color 0.3s ease;
                    }

                    button:hover {
                        background-color: #3C4048;
                    }

                    button:disabled {
                        background-color: #555;
                        cursor: not-allowed;
                    }
                    .button-container {
                        display: flex;
                        justify-content: flex-end; /* ボタンを右揃え */
                        padding: 10px 0; /* ボタン周りの余白 */
                    }

                    .answer-button {
                        background-color: #007BFF; /* ボタンの背景色 */
                        color: white; /* ボタンの文字色 */
                        border: none; /* ボーダーを無くす */
                        padding: 10px 20px; /* ボタンの内側余白 */
                        border-radius: 5px; /* ボタンの角を丸める */
                        cursor: pointer; /* ホバー時にカーソルを変更 */
                        font-size: 16px; /* ボタンのフォントサイズ */
                    }

                    .answer-button:hover {
                        background-color: #0056b3; /* ホバー時の背景色 */
                    }


@media (max-width: 600px) {
    .container {
        flex-direction: column; /* コンテナ内の要素を縦並びに */
    }

    aside.sidebar {
        width: 100%; /* サイドバーをコンテンツエリアと同じ幅に */
        order: 2; /* サイドバーを最後に配置 */
    }
  .content {
    order: 1; /* コンテンツエリアを先に配置 */
  }

}