#story { 
    background: url('../media/img/story/bg.webp') top center / cover no-repeat;
    position: relative;
    overflow: hidden;
    padding: 0 4% 20%;
    margin-top: -5%;
    z-index: -1;
    mask: url('../media/img/story/story-bg-mask.png') bottom center / cover no-repeat;
}

#story .section-header {
    box-sizing: content-box;
    padding: 1em 0 1.5em;
}

#story .story-contents {
    font-size: 2em;
    line-height: 1.5em;
    text-align: center;
    position: relative;
    display: grid;
    width:800px;
    max-width: 100%;
    margin: auto;
}

#story .story-text-frame {
    position: absolute;
    top: -11%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: clamp(1200px, 175%, 1920px);
    height: auto;
    z-index: 0;
    text-align: center;
}

@media only screen and (min-width: 425px) {
    #story .section-header {
        padding: 1.5em 0 1.5em;
    }
    #story .story-contents {
        font-size: 1.5em;
        padding: 0 2em;
    }
    #story .story-text-frame {
        top:0;
    }
}

@media only screen and (min-width: 768px) {
    #story .section-header {
        padding: 1em 0 1.25em;
    }
    #story .story-contents {
        padding: 0 4em;
    }
}

@media only screen and (min-width: 850px) {
    #story .section-header {
        padding: 1.35em 0 1.5em;
    }
    #story .story-contents {
        padding: 0 4em;
    }
}


@media only screen and (min-width: 1024px) {
    #story .section-header {
        padding: 1.6em 0 1em;
    }
    #story .story-contents {
        padding: 1em 0 0;
    }
}

@media only screen and (min-width: 1440px) {
    #story .section-header {
        padding: 1.6em 0 1em;
    }
    #story .story-contents {
        padding: 0;
    }
}

#story .text-block-top {
    text-align: center;
    
}
#story .text-block-mid {
    text-align: center;
    margin: 1em;
}
#story .text-block-bot {
    text-align: center;
}



#story .story-ss {
    position: relative;
    text-align: center;
    
    padding-bottom: 5em;
}

@media screen and (min-width: 1640px) {
    #story .wrapper {
        position: relative;
    }
    #story .story-contents {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* grid-template-rows: 1fr 25px 225px 1fr; */
        width: auto;
        font-size: 1.75em;
        padding: 0 4em;
    }
    
    #story .text-block-top {
        text-align: center;
        grid-column: 4 / 11;
        /* grid-row: 1 / 2; */
    }
    #story .text-block-mid {
        text-align: right;
        grid-column: 2 / 9;
        /* grid-row: 3 / 4; */
        padding-right: 1em;
        margin: 0;
    }
    #story .text-block-bot {
        text-align: right;
        grid-column: 1 / 9;
        /* grid-row: 4 / 5; */
        padding-right: 1em;
    }
    #story .text-block {
        margin-bottom: 1em;
    }
    #story .story-ss {
        top: 710px;
        left: 62%;
        width: 805px;
        position: absolute;
        max-width: 100%;
        margin: auto;
    }
}