@charset "utf-8";

/* ************************************************************************** */
/*  画面のサイズが 960px 未満の場合のスタイルシート */

@media screen and (max-width: 960px){

    /* ********************************************************************** */
    /* header */
    header > div{
        width         : 100%;
    }

    header > div > div#title{
        float         : none;
        width         : 100%;
    }

    header > div > ul{
        display       : none;
    }

    /* ********************************************************************** */
    /* main */
    main{
        width         : 100%;
    }

    /* table.responsive */
    main > article > section > table.responsive > thead > tr > th,
    main > article > section > table.responsive > thead > tr > td,
    main > article > section > table.responsive > tbody > tr > th,
    main > article > section > table.responsive > tbody > tr > td{
        border        : none;
        display       : block;
    }
    main > article > section > table.responsive > thead > tr > td,
    main > article > section > table.responsive > tbody > tr > td{
        padding-left  : 20px;
        padding-right : 20px;
    }

    /* div.responsive */
    main > article > section > div.responsive{
        overflow-x    : scroll;
    }
    main > article > section > div.responsive > table{
        white-space   : nowrap;
    }

    /* ********************************************************************** */
    /* footer */
    footer > div{
        width         : 100%;
    }
    footer > div > ul{
        float         : none;
        width         : 100%;
    }

}