.problem { 
    max-width: 1000px;
    width: 90%;
    margin: auto;
    background-color: white;
}

.problem img {
    width: 80%;
    margin: 10px auto;  /* 画像が中央に配置されるように */
    padding: 10px;
    display: block;
}

.problem h4 {
    text-align: center;
    margin: 10px auto;
    font-weight: bold;
    display: block;
    padding: 5px;
}

.problem p {
    text-align: center;
    margin: auto;
    font-weight: bold;
}

span {
    color: red;
    font-size: 90%;
}

.video-container {
    width: 100%;
    display: block;
    margin: 10px auto;
    max-width: 900px;
    margin-top: 0px;
    padding: 0px;
    padding-top: 20px;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 12px;
}
.nav-container {
    position: relative;
    display: flex;
    justify-content: center; /* ホームを中央に配置 */
    align-items: center;
    flex-wrap: wrap; /* 幅が狭い時に折り返し */
    width: 100%;
    padding: 10px 0;
    gap: 10px;
}

/* 「前のページ」「次のページ」を固定配置 */
.nav-container .prev {
position: absolute;
left: 0;
}

.nav-container .next {
position: absolute;
right: 0;
}

/* 「ホーム」は中央に配置 */
.nav-container .home {
position: relative;
}

/* リンクのスタイル */
.nav-container a {
text-decoration: none;
color: #333;
font-weight: bold;
padding: 5px 10px;
white-space: nowrap; /* 文字が折り返されないようにする */
}

.nav-container a:hover {
color: #007BFF; /* ホバー時の色変更 */
}

/* スマホサイズ対応 */
@media screen and (max-width: 600px) {
    .nav-container {
        flex-direction: column; /* スマホ時は縦並び */
        align-items: center; /* ボタンを中央寄せ */
        gap: 5px; /* ボタン間の隙間 */
    }
    
    .nav-container .prev,
    .nav-container .next {
        position: relative; /* 絶対配置を解除 */
        width: auto; /* ボタン幅を自動調整 */
    }
    .problem {
        width: 95%;
        margin: 2.5%;
        display: block;
    }
    .problem img {
        width: 95%;
    }
    .video-container img {
        width: 95%;
    }
}
iframe {
    display: block;
    margin: auto;
    padding: 10px;
    width: 90%;
    aspect-ratio: 16 / 9;
}