/* style.css */

body {
    font-family: 'Arial', sans-serif; /* フォントを指定 */
    line-height: 1.6; /* 行の高さを調整 */
    margin: 20px; /* 外側の余白 */
    background-color: #e4e4e4; /* 背景色 */
    color: #333; /* 文字色 */
}

h1 {
    text-align: center; /* メインタイトルを中央寄せ */
    color: #0056b3; /* タイトル色 */
    margin-bottom: 30px; /* 下の余白 */
}

hr {
    border: none; /* デフォルトの線を消す */
    border-top: 1px solid #ccc; /* 薄い灰色の実線 */
    margin: 40px 0; /* 上下の余白 */
}

section {
    background-color: #fff; /* セクションの背景色 */
    padding: 20px; /* 内側の余白 */
    margin-bottom: 30px; /* セクション間の余白 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
}

h2 {
    color: #007bff; /* 動画タイトルの色 */
    margin-top: 0; /* 上の余白をなくす */
    margin-bottom: 15px; /* 下の余白 */
    border-bottom: 2px solid #007bff; /* 下線 */
    display: inline-block; /* 下線をコンテンツ幅に合わせる */
    padding-bottom: 5px; /* 下線と文字の間の余白 */
}

video {
    display: block; /* 動画をブロック要素にする */
    max-width: 100%; /* 親要素の幅を超えないように調整 */
    height: auto; /* 高さを自動調整 */
    margin: 0 auto 20px auto; /* 中央寄せにして下余白 */
    border: 1px solid #ddd; /* 軽い枠線 */
    border-radius: 4px; /* 角を丸くする */
}

p {
    margin-top: 0; /* 上の余白をなくす */
    color: #555; /* 説明文の色 */
}