* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}



nav {
  width: 100%;
  display:inline-bl0ck;
}
nav > ul > li {
  width: 100%;
}
nav > ul > li > a {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  background-color: #FF818D;
  color: #000;
  text-align: center;
}
nav > ul > li:first-child > a{border-top: 1px solid #ccc;}
nav > ul > li > ul {
  display: none;
}
nav > ul > li li > a {
  display: block;
  width: 100%;
  padding: 10px 5%;
  border-bottom: 1px solid #ccc;
  background-color: #FFAFA9;
  color: #000080;
}

@media screen and (min-width: 700px) {
  nav{margin-top: 50px;}
  nav > ul {
    width: 960px;
    margin: 0 auto;
    font-size: 0;
  }
  nav > ul > li {
    display: inline-block;
    width: calc(100% / 5);
    font-size: 1rem;
    vertical-align: top;
  }
  nav > ul > li > a {
    border: none;
    border-left: 1px solid #ccc;
  }
  nav > ul > li:first-child > a {
    border-top: none;
    border-left: none;
  }
}

		.contents {
			display: flex;
			flex-direction: column;	/* 縦並びに */
		}
		#main  { order: 1; }	/* main を先頭に配置 */
		#sideB { order: 2; }	/* sideBを2番目に配置 */
		

		@media all and (min-width: 641px) {
			.contents {
				display: flex;
				flex-direction: row;	/* 横並びに */
			}
			
			#main  { order: 2; width: 70%; }	/* main を中央に幅50%で配置 */
			#sideB { order: 3; width: 30%; }	/* sideBを右端に幅25%で配置 */
		}

		header { background-image:url("a1380_001203.jpg"); color: #ffffff; margin:0; padding:1em 5em; }
        nav    { background-color: #990033; margin:0; padding:0; }
		footer { background-color: #cc0033; color: #ffffff; margin:0; padding:1em 5em; }
		#main  { background-color: #ffffff; margin:0; padding:1em; font-size:18px; line-height:30px; }
		#sideB { background-color: #7fffd4; margin:0; padding:1em; font-size:18px; line-height:30px;}
		h1,h2 { margin:0; padding: 0; border-bottom: 2px dashed #a0a0a0; }
		.red{color:#ff0000; font-weight:bold;}
		.blue{color:#000080;}
		.green{color:#8b4513;}
		.black{color:#000000;font-size:21px;font-weight:bold; line-height:35px;}
		.pink{color:#ff0000;}
		.futo{font-weight:bold;}
		
		
		.kome{
		 text-indent:1em;
         padding-left:1em;
		 
         }
dir{text-align:left;
    width:600px;
   	margin:auto;
   width:90%;
   border:5px solid #73AD21;
   padding:5px;
   font-size:18px;
 }	
 
 form{text-align:center;
    width:500px;
   	margin:auto;
   width:80%;
   border:5px solid #FFAFA9;
   padding:5px;
   font-size:18px;
 }		 
 
 .link_button {
  font-weight: bold;/*太字に*/
  text-decoration: none;/*下線消す*/
  background: #00008b;/*背景を水色に*/
  color:white;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
  }
/*以下カーソルを当てたとき*/
.link_button:hover {
  background: silver;/*背景色をシルバーに*/
  text-decoration: none;/*下線を消す*/
}

/*以下訪問済みのデザイン*/
.link_button:visited {
  color: gray;/*文字をグレイに*/
}