@charset "utf-8";

/* PukiWikiレスポンシブ設定 */

/* コンテンツ（メニューバー＋ページ本体）全体 */
div#contents {
    display: table;                     /* 表示をテーブル（TABLE要素）同様にする */
    table-layout: fixed;                /* テーブル列幅固定 */
    border-spacing: 5px; 0;             /* 隣接セル間隔：左右8ピクセル */
    width: 100%;                        /* 幅100％ */
}

/* メニューバー*/
div#menubar {
    display: table-cell;                /* 表示をテーブルセル（TD要素）同様にする */
    vertical-align: top;                /* 上端揃え */
    width: 170px;                       /* 幅105ピクセル（オリジナルとほぼ同様サイズ：任意の数字） */
}

/* ページ本体 */
div#body {
    display: table-cell;                /* 表示をテーブルセル（TD要素）同様にする */
}

/* 低解像度（スマホ等）メディアクエリ */
@media (max-width: 800px) {             /* 横幅800ピクセル以下のデバイス */
    div#contents {
        display: table;                 /* 表示をテーブル（TABLE要素）同様にする */
        table-layout: fixed;            /* テーブル列幅固定 */
        border-spacing: 8px; 0;         /* 隣接セル間隔：左右8ピクセル */
        width: 100%;                    /* 幅100％ */
    }
    div#menubar {
        display: table-footer-group;    /* 表示をテーブルフッタ（TFOOT要素）同様にする */
        width: 100%;                    /* 幅100％ */
    }
    div#body {
        display: table-row-group;       /* 表示をテーブルボディ（TBODY要素）同様にする */
        width: 100%;                    /* 幅100％ */
    }
}

/* ページ本体の画像のレスポンシブ設定 */
div#body img {
    max-width: 100%;                    /* 幅の最大値を100％指定 */
    height: auto;                       /* 縦は幅により自動設定 */
}