
@media screen and (max-width:767px){
    /*TOP*/
    .top {
        width: 100%;
        aspect-ratio: 42 / 84;
        background-size: cover;
    }
    .left-top-text
    {
        font-size: calc(18px * var(--font-scale));
        letter-spacing: 0.4rem;
    }
    .fv-logo {
        width: 80%;
    }
    .kaisai:after
    {
        border-left: 0.8rem solid var(--control-color);
        border-top: 0.85rem solid transparent;
        border-bottom: 0.85rem solid transparent;
    }
    .sec-wrap
    {
        flex-direction: column;
        gap: 50px;
    }
    .about .sec-wrap>div, .story .sec-wrap>div
    {
        width: 100%;
    }
    .about-photo-wrap
    {
        top: 25%;
        width: 95%;
    }
    .photo-area
    {
        aspect-ratio: 6/5;
    }
    .il-about-yairo
    {
        position: absolute;
        bottom: 50%;
        right: 5%;
        width: 25%;
        max-width: 180px;
        z-index: 5;
    }
    
    .story
    {
        padding: 50px 0 50px;
        background-size: cover;
    }
    .story-kochi
    {
        bottom: -35%;
        width: 90%;
    }
    .story-text p
    {
        line-height: 2.2;
        margin: 0 25px;
    }
    .story-text-wrap .more-btn-line {
        position: absolute;
        right: 0;
        bottom: 10%;
    }
    .more-btn-line
    {
        width: 90%;
        border-top: 1px solid var(--control-color);
    }
    .story .photo-area>p
    {
        font-size: calc(90px * var(--font-scale));
        bottom: -1.4%;
    }
    .sinnyouju-il
    {
        width: 25%;
        max-width: 180px;
        bottom: -80%;
    }
    
    .info-container
    {
        margin: 25px auto;
    }
    .genre-buttons
    {
        gap: 10px 5px;
        justify-content: flex-start;
    }
    .info-wrapper
    {
        flex-direction: column;
    }
    .info-link
    {
        width: 100%;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid #fff;
    }
    .info-flex
    {
        flex-direction: row;
        justify-content: space-between;
    }
    .info
    {
        padding: 20px 0;
    }
    .info-link:first-of-type
    {
        border-left: none;
        border-top: 1px solid #fff;
    }
    .sec-more.sp
    {
        margin: auto 0 auto auto;
    }
    .links-wrap
    {
        width: 100%;
        margin: 50px 0 0;
        padding: 50px 25px;
    }
    .sponsor-group-all
    {
        padding: 15px;
        
    }
    .sponsor-list-all
    {
        gap:15px;
        grid-template-columns: repeat(2, calc((100% - 15px) / 2));
    }
    .relation-list
    {
        gap: 15px;
    grid-template-columns: repeat(2, calc((100% - 15px) / 2));
    }
    .index main:after
    {
        aspect-ratio:  5/4;
    }
    
    
}   