body{
       margin: 0;
        max-width: 1000px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: white;
     }
header { 
       height: 20px;
		/*max-width:1000px; 
		height:20px; 
		position: center;
		background-color: #D3D3D3;*/	
	
	}	

			


div{
      display: flex;
      flex: 1;
   } 
main {
    flex: 1;               /*横にいっぱいいっぱい*/
	max-width: 800px; 
	background-color: #ADD8E6;
       
      }	

 

nav{
    width: 150px;
    }
side{
     width: 299px;
     background-color: #ADD8E6;
        }



foofter { 
		max-width:1000px; ;  
		height:50px; 
		//position: center;
		background-color: #D3D3D3;
		text-align:center; 
		//clear: both;
		
		} 

@media screen and (max-width: 900px){ //横幅が900px以下になった場合の記述を{}内に書く
        body,nav,side{
        width: 100%;
        }
       div{
       flex-direction: column;         //縦画面divにするにはbodyにもflex-direction: colum;
       }
       main{
       order: -1;  //順序グループに属するのかをorderプロパティで指定
       }
     }










          /*--以上の部分2018/10/2更新---------------


div {position: center; }
.bottom-em6{padding-bottom: 6em}  /*6行余白の指令*/
				/*-----旧です参考-#contener {
				        width: 1005px;
				        margin:0 auto 0;
				        background-color:olive;/*おかしくないですか*/
				        text=align: center;

				}------*/    
				/*-----旧です参考-#contents {
				        width:1000px;
				        margin:0 auto 0;
				        background-color:khaki;
				        text-align: left;
				        
				}------*/ 

#tomorrow{background-color:#778899;margin: 1ex 10ex 1ex; 1ex}
body {margin-left: 6%;
	color: #000000;　　　　　　/*2015年５月１７日作成<!--字の色　黒--!>　*/
 　 background-image: url(http://masumo10.web.fc2.coexm/tile-g.gif);
	background-repeat: repeat-x;
	background-position: right;
    background-attachment: scroll;/*背景画固定はfixed*/
    background-color: lightblue;　/*淡い青　背景色*/
  ｝


.cap-i {
	font-style: italic;　/*文字を斜体にし、周囲に余白２０と１５と１０と１５*/

 }


.margin-2em{margin: 2em;}  　　 /*1行余白の指令*/
  
.over-t{text-decoration: over-line;}   /*文字の上によこ線の指令htmlはspan class=over-tと/spanで〜囲む*/
.under-t{text-decoration: under-line;}   /*文字の下によこ線の指令htmlはspan class=under-tと/spanで〜囲む*/
.position{ font-size: 20px;}  
 
  
  
p.sample4 {text-decoration: line-through;}　　　　/*打消し線、HTMLソース<p class="sample4">打ち消し線が付きます。</p>*/
*/