@charset "UTF-8";
body {
    margin: auto;
    width: 1000px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    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; /* 淡い青 背景色 */
}
header {
    width: 800px;
    height: 50px;
}
pre.code-block, pre.code-block code {
    background-color: #f4f4f4;
    padding-left: 0;
    border-radius: 5px;
    font-family: "Courier New", monospace;
    font-size: 16px;
    overflow-x: auto;
    white-space: pre-wrap;
    height: auto;
}
.nav li{ 
    float: left; 
    margin: 8px 4px 2px 0;
    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; 
	}
.top li {padding:2px 0;}







div{
    display: flex;
    flex: 1;
}
main{
 
   flex: 1;
   width: 800px; 
   float: left;  /*回り込み、以下は押し上げる*/
   padding:0px 0px 15px 20px;
   //margin:0 0 0 30px; 
   background-color: #eee6f5;
   
   position: center; 
   margin:0 auto 0;
   //background-color: #ADD8E6;
   text-align: left;
   
}





nav{
min-height: 500px;
 width: 300px;
 
 }
li { list-style-type: none; line-height：4rem;	} 
ul {
       
      list-style-type：none;
      margin：0 0 20px 0;
      line-height：4em;      
}
li {
    padding: 5px 10px 5px 10px; /* 上左下右の順番 */
    background-image: url("bss_1.png");
    background-repeat: no-repeat;
    background-position: 2px 8px; /* 左から2ピクセル、上から8ピクセルに画像の位置を変更 */
    border-bottom: 1px #666666 dotted;
    padding-top: 10px;
    padding-bottom: 7px; /* liに行間が開きました */
}
l:hover {
    color: coral;
} 
 
 
aside{
     width: 0;
     padding-left: 10px;
}
footer{
 height: 200px;
 }
@media screen and (max-width: 900px){
  body,nav,aside{
  width: 100%;
  }
  div{
  flex-direction: column;
  }
  main{
  order: -1;
  }
}body {
    margin: auto;
    width: 800px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
   
}
header{
 height: auto;
}
div{
    display: flex;
    flex: 1;
}
main{
flex: 1;
}
nav{
 width: 200px;
 }
/*aside{ width: 250px;}*/
footer{
 height: 200px;
 }
 .translate-rotate {
  margin-top: 35px;
  width: 470px;
  height: 2px;
      /*float: left;*/
  background-color: gold;
  transform: translateX(180px) rotate(13deg);
}

#welcome{
    border-radius:16px;}/*角丸*/
.top li{list-style-image: url('https://canape2020.stars.ne.jp/img/c.png')}  /*あたまにcssで画像挿入*/ 

header { 
		width:800px; 
		height: auto; 
		position: center;
		background-color: #D3D3D3;
	}
#memo{
background-color: #D8D8D8;
padding: 0 0 30px 0；}
@media screen and (max-width: 900px){
  body,nav,aside{
  width: 100%;
  }
  div{
  flex-direction: column;
  }
  main{
  order: -1;
  }
}