.main {
    /* 1. 横方向の中央寄せ */
    display: block; 
    margin-left: auto;
    margin-right: auto;
    
    /* 2. 背景とサイズ */
    background-color: #6d6a73;
    width: 60%;             /* スマホ用 */
    max-width: 60%;        /* PCで広がりすぎないように */
    
    /* 3. 内側の余白と見た目 */
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    
    /* 4. 重なり順 (雨より手前に) */
    position: relative;
    z-index: 10;
    
    /* 5. 縦方向の余白 (common.cssのpadding-topを考慮) */
    margin-top: 5px; 
}

.jinobun{
    background-color: #a9a9a9;
    margin: 10px;

    padding-bottom: 3px;
}

.text{
    padding-top: 3px;
    padding-bottom: 3px;
}

.tuusinki
{
    color: #a9a9a9;
}

/* テキストの基本状態（ここを修正） */
.scenario-block {
    color: #272121;
    margin-bottom: 2rem;
    line-height: 2;

    /* ★ここを追加：最初は透明で、少し下に配置 */
    opacity: 0;
    transform: translateY(20px);
    /* ★ここを追加：変化を滑らかにする（0.8秒かけて動く） */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示された時のスタイル（これはOK） */
.scenario-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 非表示状態（物理的に消す用） */
.hidden {
    display: none;
}