/* チャット＋画像のスクロールエリア */
#chat-container {
    width: 90%;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px 5%;
    position: relative;
    margin: auto;
}

/* 吹き出し全体のデザイン */
.chat-item {
    display: flex;
    align-items: flex-start; /* p の高さに影響されないように修正 */
    max-width: 100%;
    margin: 20px 0;
    font-size: 16px;
}

/* 左側（キャラA） */
.chat-item.left {
    flex-direction: row;
    text-align: left;
}

.chat-item.left .chat-icon {
    margin-right: 10px;
}

/* 右側（キャラB） */
.chat-item.right {
    flex-direction: row-reverse;
    text-align: left;
}

.chat-item.right .chat-icon {
    margin-left: 10px;
}

/* キャラアイコン（顔＋上半身のみ表示） */
.chat-icon {
    width: 80px;  
    height: 80px;
    border-radius: 50%;  
    object-fit: cover;
    object-position: top;
    border: 2px solid #ccc;
    flex-shrink: 0; /* 高さを固定し、縮小を防ぐ */
    aspect-ratio: 1 / 1; /* 常に正円を維持 */
}

/* 吹き出しデザイン */
.chat-item p {
    background-color: #ffeaef;
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 70%;
    display: inline-block;
    font-weight: bold;
}

.chat-item.right p {
    background-color: #eafaff;
}

/* 画像を中央に配置 */
.image-container {
    text-align: center;
    margin: 20px 0;
}

.image-container img {
    /* width: 80%; */
    max-width: 100%;
    height: auto;
    width: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.video-container {
    width: 100%;  /* 下のコンテンツと同じ幅 */
    /*max-width: 560px;  /* iframeと同じ最大幅 */
    display: block;  /* 画像もブロック要素にすることで中央寄せ */
    margin: 10px auto;  /* 画像が中央に配置されるように */
    max-width: 900px;
    margin-top: 0px;
    padding-top: 20px;
    aspect-ratio: 16 / 9;
    height: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
th {
    background-color: #f4f4f4;
}

.challenge {
    margin: auto;
    text-align: center;
    display: block;
    width: 100%;
}
span {
    color: red;
}


.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; /* ボタン幅を自動調整 */
    }
}

@media (max-width: 780px) {
    .image-container img {
        width: 100%;
    }

}