body{
       margin: 0 auto;
        max-width: 1000px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: white;
     }
header { 
       height: 50px;
		/*max-width:1000px; 
		height:50px; 
		position: center;
		background-color: #D3D3D3;*/	
	
	}			
.nav li{ 
		float: left; 
		margin: 8px 4px 2px;
		border-radius: 0.5em;	
		color: lightblue; 
		background-color: lightblue;
	}
.nav a{ 
		display: block; 
		color: #00008B; 
		border:1px solid #999; 
		padding: 0 7px;
		border-radius: 0.5em;	
	}	
.nav a:hover{ 
		color: #FEF !important; 
		border: 1px solid white; 
	}
.text_bold {
color: #8A2BE2; /*青紫色*/

} 
.top li{list-style-image: url('/bss-1.png')}  /*あたまにcssで画像挿入*/
div{
      display: flex;
      flex: 1;
   } 
main {
    flex: 1; 
	max-width: 800px; 
	background-color: #ADD8E6;
       
      }	
.btn_test {
    display:  block;            			/* ブロック要素にする */
    color:  #fff;               			/* 文字の色指定 */
    background-color: #8A2BE2;     			/* 背景色指定 */
    padding:  5px ;             			/* 余白指定 */
    text-align: left;        			/* 文字をcenter中央揃えに */
    text-decoration:  none;     			/* 文字の装飾を無くす */
    border-radius:  5px;        			/* 角丸指定 */
    width:  500px;              			/* 幅指定 */
    box-shadow: 0px 3px 5px 0px #9E9E9E;	/* 影をつける */
}
 
li {
   
    list-style-type:none;		/*リストマーカー無しにする*/
	margin-bottom: 15px;
	}
nav{
    width: 50px;
    }
side{
     width: 360px;
      background-color: #ADD8E6;
        }

container { 
		max-width:1020px; 
		
		margin: 0 auto 0;
		background-color: #E0FFFF; 
		
		
	}/*#container{width: 1000px;background-color: #ADD8E6;} */


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

@media screen and (max-width: 900px){ //横幅が900px以下になった場合の記述を{}内に書く
        body,nav,aside{
        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>*/
*/