#facilityCards
{
    container: cards / inline-size;

    .cards
    {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr max-content;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        .div1 { grid-area: 1 / 1 / 2 / 2; }
        .div2 { grid-area: 2 / 1 / 3 / 2; }
        .div3 { grid-area: 1 / 2 / 2 / 3; }
        .div4 { grid-area: 2 / 2 / 3 / 3; }
        .div5 { grid-area: 1 / 3 / 2 / 4; }
        .div6 { grid-area: 2 / 3 / 3 / 4; }
    }
}

#kujoukaiketsu
{
    container: kujoukaiketsu / inline-size;

    .container
    {
        flex-wrap: nowrap;
    }
}

#sodanTableContainer
{
    margin-right: 1lh;
}

@media (hover: hover) and (pointer: fine)
{
    @container cards (inline-size < 1300px)
    {
        #facilityCards
        {
            .cards
            {
                display: grid;
                grid-template-columns: max-content 1fr;
                grid-template-rows: repeat(3, max-content);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
                .div1 { grid-area: 1 / 1 / 2 / 2; }
                .div2 { grid-area: 1 / 2 / 2 / 3; }
                .div3 { grid-area: 2 / 1 / 3 / 2; }
                .div4 { grid-area: 2 / 2 / 3 / 3; }
                .div5 { grid-area: 3 / 1 / 4 / 2; }
                .div6 { grid-area: 3 / 2 / 4 / 3; }
            }
        }
    }
    @container cards (inline-size < 835px)
    {
        #facilityCards
        {
            .cards
            {
                display: block;
            }
        }
    }
    @container cards (inline-size < 421px)
    {
        #facilityCards
        {
            .cards
            {
                .div1, .div3, .div5
                {
                    font-size: 3vw;
                }
            }
        }
    }

    @container kujoukaiketsu (inline-size < 1000px)
    {
        #kujoukaiketsu
        {
            .container
            {
                display: block;

                #sodanTableContainer
                {
                    margin-right: 0;
                }
            }
        }
    }
    @container kujoukaiketsu (inline-size < 483px)
    {
        #kujoukaiketsu
        {
            .grid.basic
            {
                font-size: 2.5vw;
            }
        }
    }
}

@media (hover: none) and (pointer: coarse)
{
    #facilityCards
    {
        .cards
        {
            @container cards (inline-size < 1174px)
            {
                display: grid;
                grid-template-columns: max-content 1fr;
                grid-template-rows: repeat(3, max-content);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
                .div1 { grid-area: 1 / 1 / 2 / 2; }
                .div2 { grid-area: 1 / 2 / 2 / 3; }
                .div3 { grid-area: 2 / 1 / 3 / 2; }
                .div4 { grid-area: 2 / 2 / 3 / 3; }
                .div5 { grid-area: 3 / 1 / 4 / 2; }
                .div6 { grid-area: 3 / 2 / 4 / 3; }
            }
            @container cards (inline-size < 800px)
            {
                display: block;
            }
            @container cards (inline-size < 475px)
            {
                .div1, .div3, .div5
                {
                    font-size: 3.6vw;
                }
            }
        }
    }

    #kujoukaiketsu
    {
        .container
        {
            @container kujoukaiketsu (inline-size < 923px)
            {
                flex-direction: column;
                #sodanTableContainer
                {
                    margin-right: 0;
                }
            }
        }
        .grid.basic
        {
            @container kujoukaiketsu (inline-size < 432px)
            {
                font-size: 2.77vw;
            }
            @container kujoukaiketsu (inline-size < 432px)
            {
                font-size: 3.1vw;
            }
            @container kujoukaiketsu (inline-size < 389px)
            {
                font-size: 3vw;
            }
        }
    }
}