@charset "UTF-8"; /* 文字コードを指定 */ /* Google Fonts (HTMLのにもlinkタグを追加すること) */ /* ===== ベース ===== */ body { background-color: #0f1923; color: #e0e0e0; font-family: 'Inter', sans-serif; margin: 0; padding: 0; line-height: 1.8; } .container { max-width: 800px; margin: 0 auto; padding: 20px 30px; } /* ===== ヘッダー ===== */ header { background: linear-gradient(135deg, #1a2d3d, #2a4a6b); padding: 30px 0; border-radius: 10px; margin-bottom: 30px; text-align: center; } header h1 { color: #4fc3f7; font-size: 2.5em; margin: 0; } header p { color: #b0bec5; font-size: 1.1em; } /* ===== 見出し ===== */ h2 { color: #4fc3f7; font-size: 1.4em; border-bottom: 2px solid #2a4a6b; padding-bottom: 8px; margin-top: 30px; } /* ===== リンク ===== */ a { color: #4fc3f7; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #81d4fa; text-decoration: underline; } /* ===== リスト（カード風） ===== */ ul { list-style: none; padding: 0; } ul li { background-color: #1a2d3d; margin: 10px 0; padding: 15px 20px; border-radius: 8px; border-left: 3px solid #4fc3f7; transition: transform 0.2s ease; } ul li:hover { transform: translateX(5px); } /* ===== 水平線 ===== */ hr { border: none; height: 1px; background-color: #2a4a6b; margin: 30px 0; } /* ===== フッター ===== */ footer { text-align: center; padding: 20px 0; margin-top: 40px; border-top: 1px solid #2a4a6b; }