/* 全体の設定：すべての要素に適用される基本スタイル */
* {
    margin: 0; /* 全要素の外余白を0に */
    padding: 0; /* 全要素の内余白を0に */
    box-sizing: border-box; /* paddingとborderをwidthとheightの計算に含む */
    font-family: 'Poppins', sans-serif; /* 全要素のフォントをPoppinsに設定 */
    text-rendering: optimizeLegibility; /* テキストの可読性を向上させる */
}

/* bodyタグのスタイル設定 */
body {
    background-color: #121212; /* 背景色をダークグレーに */
    color: #ccc; /* テキストの色を薄いグレーに */
    line-height: 1.6; /* 行の高さを1.6に設定 */
    font-size: 16px; /* フォントサイズを16pxに設定 */
}

/* ヘッダーのスタイル設定 */
header {
    background: linear-gradient(135deg, #008aff, #00ffe7); /* 背景にグラデーションを設定 */
    color: #fff; /* テキストの色を白に */
    padding: 20px 40px; /* 上下20px、左右40pxのパディングを追加 */
    text-align: center; /* テキストを中央寄せ */
    position: sticky; /* スクロール時に画面上部に固定 */
    top: 0; /* 上端から0pxの位置に固定 */
    z-index: 1000; /* 他の要素より前面に表示 */
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.7); /* テキストに影を追加 */
}

header h1 {
    font-size: 24px; /* H1タグのフォントサイズを24pxに設定 */
}

header nav ul {
    list-style: none; /* リストのスタイルをなしに */
    padding: 0; /* 内余白を0に */
}

header nav ul li {
    display: inline; /* リスト項目をインライン表示 */
    margin-right: 20px; /* 右の外余白を20pxに設定 */
}

header nav ul li a {
    color: #fff; /* リンクのテキスト色を白に */
    text-decoration: none; /* リンクの下線をなくす */
    padding: 8px 16px; /* 上下8px、左右16pxのパディングを追加 */
    border-radius: 20px; /* 角の丸みを20pxに */
    background: rgba(0, 255, 231, 0.2); /* 背景色を設定（透明度含む） */
    transition: all 0.3s; /* すべての変化を0.3秒間で遷移 */
}

header nav ul li a:hover {
    background-color: rgba(0, 255, 231, 0.4); /* ホバー時の背景色 */
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.5); /* ホバー時の影 */
}

/* コンテナのフレックスボックス設定 */
.container {
    display: flex; /* フレックスボックスとして表示 */
    margin-top: 20px; /* 上の外余白を20pxに */
}

/* サイドバーのスタイル設定 */
.sidebar {
    width: 210px; /* 幅を210pxに設定 */
    padding: 10px; /* 全方向に10pxのパディングを追加 */
    background: #222; /* 背景色をダークグレーに */
    color: #fff; /* テキスト色を白に */
    position: sticky; /* スクロール時に位置を固定 */
    top: 100px; /* 上端から100pxの位置に固定 */
}

.sidebar h2 {
    color: #00ffe7; /* タイトルのテキスト色を水色に */
    padding-bottom: 10px; /* 下のパディングを10pxに */
    padding-top: 10px; /* 上のパディングを10pxに */
    padding-left: 10px; /* 左のパディングを10pxに */
    padding-right: 10px; /* 右のパディングを10pxに */
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.7); /* テキストに影を追加 */
}



.sidebar ul {
    list-style: none; /* リストスタイルなし */
    padding-bottom: 0px; /* 下のパディングを0pxに */
    padding-top: 0px; /* 上のパディングを0pxに */
    padding-left: 10px; /* 左のパディングを10pxに */
    padding-right: 10px; /* 右のパディングを10pxに */
    margin-top: 0px; /* 上の外余白を0pxに */
}

.sidebar ul li a {
    color: #bbb; /* リンクのテキスト色を明るいグレーに */
    text-decoration: none; /* 下線なし */
    display: block; /* ブロック要素として表示 */
    padding: 10px; /* 全方向に10pxのパディング */
    transition: color 0.3s, background-color 0.3s; /* 色と背景色の遷移を設定 */
}

.sidebar ul li a:hover {
    background-color: #333; /* ホバー時の背景色 */
    color: #00ffe7; /* ホバー時のテキスト色 */
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.7); /* テキストに影を追加 */

}

/* メインコンテンツ領域のスタイル設定 */
main {
    flex: 1; /* フレックスアイテムの伸縮比率を1に設定 */
    padding: 20px; /* 全方向に20pxのパディング */
}


main section {
    background: #282828; /* 背景色を設定 */
    padding: 20px; /* 全方向に20pxのパディング */
    border-radius: 8px; /* 角の丸みを8pxに設定 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* 影を設定 */
    margin-bottom: 20px; /* 下の外余白を20pxに */
    transition: transform 0.3s ease-in-out; /* 変形の遷移を設定 */
}

main section:hover {
    transform: translateY(-5px); /* ホバー時に上に5px移動 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* ホバー時の影を大きく */
}

main section h2 {
    color: #fff; /* セクションのタイトル色を白に */
}

main section ul li {
    display: inline; /* リスト項目をインライン表示 */
    margin-right: 20px; /* 右の外余白を20pxに設定 */
    padding-left: 15px; /* 左の余白を15pxに設定 */

}

main section ul li a {
    color: #fff; /* リンク色を白に */
    text-decoration: none; /* 下線なし */
    padding: 6px 12px; /* 上下6px、左右12pxのパディング */
    border-radius: 20px; /* 角の丸みを20pxに設定 */
    background: rgba(0, 255, 231, 0.2); /* 背景色を設定（透明度含む） */
    transition: all 0.3s; /* すべての変化を0.3秒間で遷移 */
}

main section ul li a:hover {
    background-color: rgba(0, 255, 231, 0.4); /* ホバー時の背景色 */
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.5); /* ホバー時の影 */
}

/* フッターのスタイル設定 */
footer {
    text-align: center; /* テキストを中央寄せ */
    padding: 20px 40px; /* 上下20px、左右40pxのパディング */
    background-color: #222; /* 背景色をダークグレーに */
    color: #ccc; /* テキスト色を薄いグレーに */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2); /* 上向きの影を設定 */
    width: 100%; /* 幅を100%に設定 */
}

/* スタイリッシュなボタンのスタイル */
.stylish-button {
     background-color: rgba(0, 180, 0, 0.5); /*背景色 */
    border: none; /* 境界線なし */
    color: white; /* テキスト色を白に */
    padding: 10px 20px; /* 上下10px、左右20pxのパディング */
    text-align: center; /* テキストを中央寄せ */
    text-decoration: none; /* テキストの装飾をなしに */
    display: inline-block; /* インラインブロックとして表示 */
    font-size: 16px; /* フォントサイズを16pxに設定 */
    cursor: pointer; /* カーソルをポインターに設定 */
    border-radius: 20px; /* 角の丸みを20pxに設定 */
    transition-duration: 0.4s; /* 遷移の持続時間を0.4秒に設定 */
}

.stylish-button:hover {
    background-color: rgba(0, 180, 0, 0.6); /* ホバー時の背景色 */
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.6); /* ホバー時の影 */
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.7); /* テキストに影を追加 */
}



.read-button {
    background: rgba(0, 180, 0, 0.5); /* 背景色を設定（透明度含む） */
    border: none; /* 境界線なし */
    color: white; /* テキスト色を白に */
    padding: 6px 12px; /* 上下6px、左右12pxのパディング */
    text-align: center; /* テキストを中央寄せ */
    text-decoration: none; /* テキストの装飾をなしに */
    display: inline-block; /* インラインブロックとして表示 */
    font-size: 16px; /* フォントサイズを16pxに設定 */
    cursor: pointer; /* カーソルをポインターに設定 */
    border-radius: 20px; /* 角の丸みを20pxに設定 */
    transition-duration: 0.3s; /* 遷移の持続時間を0.3秒に設定 */
}

.read-button:hover {
    background-color: rgba(0, 180, 0, 0.6); /* ホバー時の背景色 */
    box-shadow: 0 0 20px rgba(0, 255, 231, 0.6); /* ホバー時の影 */
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.7); /* テキストに影を追加 */
}