#text-display {
    padding: 1.25rem 0 0 0;
    width: 100%;
    /* color: #666666; */
    /* background-color: aqua; */
    font-size: 1.23rem;
    /* color: #666; */
    margin: 0 auto 1rem auto;
    line-height: 3rem;
    /* --- ここから追加/変更 --- */
    opacity: 1;
    /* 初期状態は不透明 */
    transition: opacity 0.5s ease-in-out;
    /* opacityが変化する際にアニメーション（JavaScriptの「fadeDuration」と秒数を合わせる） */
    /* --- ここまで追加/変更 --- */
    /* 文字の折り返し */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

#text-display.hidden {
    opacity: 0;
    /* 不透明度を0（完全に透明）にする */
}

.icon {
    height: 30px;
    vertical-align: middle;
}

.icon_nav {
    float: left;
    height: 30px;
    line-height: 30px;
    /* background-color: aqua; */
    padding: 0 2rem 0 0;
    z-index: 2;
}

.icon_label {
    padding: 0 0 0 3px;
    position: relative;
    top: 2px;
    /* color: #666666; */
    color: #a0a0a0;
}

#next-button {
    /* max-width: 200px; */
    /* width: 100%; */
    /* color: #fff; */
    color: #80b2e5;
    padding: 8px 50px 10px 50px;
    background-color: #80b2e5;
    /* background: rgba(0, 102, 204, 0.7); */
    background: rgba(255, 255, 255, 0.5);
    /* border: 1px solid #fff; */
    border: 1px solid #99c2eb;

    border-radius: 20px;
    /* margin: 1.5rem 0 0 0; */
    font-size: 1.05rem;
}

/* #next-button:focus, */
#next-button:active {
    /* opacity: 0.8; */
    background: rgba(0, 102, 204, 0.4);
    cursor: pointer;
    border-radius: 20px;
    color: #fff;
}

#next-button.hidden {
    opacity: 0;
    /* 不透明度を0（完全に透明）にする */
}

/* #next-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
} */

.next-button-area {
    padding: 1.5rem 0;
}



/* AI追加********************************************* */

#button-container {
    /* display: flex; */
    /* フレックスボックスで子要素（ボタン）を横並びに */
    align-items: center;
    /* 子要素を垂直方向の中央に揃える */
    margin-bottom: 15px;
    /* 下にお気に入りリストとのスペース */
    gap: 10px;
    /* ボタン間の隙間 */
}


/* お気に入りボタンのスタイル */
#favorite-button {
    background: none;
    /* background-color: #42AFE3; */
    border: none;
    font-size: 2.0rem;
    /* テキスト★のサイズ */
    cursor: pointer;
    color: #ccc;
    /* デフォルトの色 (☆用) */
    transition: color 0.2s ease-in-out;
    padding: 0 0 0 0.8rem;
    /* 不要なpaddingを削除 */
    line-height: 3rem;
    vertical-align: middle
}

#favorite-button.favorited {
    color: gold;
    /* お気に入り登録済みの色 (★用) */
}

#favorite-button:hover {
    color: #ffdb58;
    /* ホバー時の色 */
}


#remove-favorite-button {
    background: none;
    border: none;
    font-size: 2.0em;
    /* テキスト★のサイズ */
    cursor: pointer;
    color: gold;
    /* お気に入り済みなので最初から金色 */
    transition: color 0.2s ease-in-out;
    padding: 0 0 0 0.8rem;
    /* 不要なpaddingを削除 */
    line-height: 3rem;
    vertical-align: middle;
}

#remove-favorite-button:hover {
    color: #ffdb58;
    /* ホバー時の色 */
}

#remove-favorite-button:disabled {
    color: #ccc;
    /* 無効時の色 */
    cursor: not-allowed;
}

/* ボタンもフェードアウト＋インする */
button {
    padding: 8px 15px;
    font-size: 1em;
    cursor: pointer;

    /* --- ここから追加/変更 --- */
    opacity: 1;
    /* ボタンの初期状態は不透明 */
    transition: opacity 0.3s ease-in-out;
    /* opacityが変化する際に0.3秒かけてアニメーション */
    /* --- ここまで追加/変更 --- */
}

/* --- ここから追加 --- */
/* ボタンを非表示にするためのクラス */
button.hidden {
    opacity: 0;
    /* 不透明度を0（完全に透明）にする */
}

/* --- ここまで追加 --- */


button:disabled {
    cursor: not-allowed;
    /* opacity: 0.6; <--- hidden クラスで opacity を制御するため削除 */
}


/* ページ内に記載していた */
#text-display.hidden {
    opacity: 0;
    /* 不透明度を0（完全に透明）にする */
}