body {
    background-color: #a1b9c9;
    color: #1f1930;
    font-family: Arial, sans-serif;
    display: flex; /* この設定で直下の子要素が横に並びます */
    justify-content: center;
    flex-direction: column; /* これを追加 */
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.dialogue-container {
    padding-top: 20px;
    max-width: 600px; /* 会話ボックス全体の最大幅を固定 */
    width: 100%;
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: center;
}

.dialogue-box {
    display: flex;
    width: 100%; /* 親要素の幅に合わせて広がる */
    gap: 15px;
    margin-bottom: 25px;
    align-items: center;
    background-color: #1f1930;
    border: 2px solid #f9f9f9;
    padding: 15px;
}

.image-placeholder {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-placeholder img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.text-content {
    background-color: #e0e0e0;
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    justify-content: flex-start;
    min-width: 0; /* これを追加 */
}

.text-content p {
    margin: 0;
}

.character-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.text-body {
    line-height: 1.4;
}
/* メニューと内容表示枠のコンテナ */
.menu-and-content-container {
    max-width: 600px; /* メニューの幅を固定 */
    min-width: 600px;
    margin-left: 20px; /* 会話ボックスとの間に余白を作る */
    display: flex;
    flex-direction: column;
}

.menu-item {
    padding: 10px 15px;
    background-color: #dedeeb;
    color: #1f1930;
    border: 2px solid #504e54;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
}

.content-box {
    background-color: #e0e0e0;
    padding: 15px;
    border: 2px solid #1f1930;
    display: none; /* 初期状態では非表示 */
}

.content-box p{
    text-align: center;
}


.content-container{
    min-width: 100%;
}

.serifu{
    background-color: #1f2056;
    padding: 6px 5px;
    margin: 5px;
    color: #a1b9c9;
}

.imgilu{
    text-align: center;
    margin: 10px;
    max-width: 95%;
}

/* content-boxの中に配置する会話ボックスの個別設定 */
.inner-dialogue-box {
    /* 親要素の幅に合わせて伸縮する */
    max-width: 95%;
    min-width: unset; /* 親要素の幅に合わせて自動調整 */
    margin: 20px 0; /* 上下の余白を追加 */
}

/* スマートフォン・タブレット用のメディアクエリ */
@media (max-width: 768px) {
    /* bodyのパディングを減らす */
    body {
        padding: 10px;
    }

    /* .dialogue-container と .menu-and-content-container の幅を調整 */
    .dialogue-container,
    .menu-and-content-container {
        min-width: unset; /* 固定幅を解除 */
        max-width: 80%;
        width: 100%;
    }

    /* .dialogue-boxの画像とテキストの配置を変更 */
    .dialogue-box {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        max-width: 90%;
    }


    

    /* .image-placeholderのサイズを調整 */
    .image-placeholder {
        width: 80px;
        height: 80px;
    }

    /* .text-contentのパディングを調整 */
    .text-content {
        padding: 10px;
    }

    /* ★ここから追加★ */
    .imgilu img {
        max-width: 100%; /* 親要素の幅を超えないようにする */
        height: auto; /* 高さを自動調整し、縦横比を維持する */
    }
}