body {
  	font-family: "meirio", "Yu Gothic", sans-serif;  	/*書体*/
  	padding-left: 20px;  	/*左インデント*/
  	padding-right: 30px;  	/*右インデント*/
  	padding-top: 30px;  	/*上インデント*/
  	padding-bottom: 30px;  	/*下インデント*/
  	background-color: #CCFFCC;  	/*背景色*/
  }
  h1 {
  	font-size: 25px;  	/*h1の文字の大きさ*/
  	color: green;  	/*h1の色*/
  }
  h2 {
  	font-size: 16px;  	/*h2の文字の大きさ*/
  	color: #800000;  	/*h2の色*/
  }
  p {
  	font-size: 14px;  	/*pの文字の大きさ*/
  	color: #500000;  	/*pの色*/
  }
  * {
  	margin: 0;
  	padding: 0;
  	/* 全てのプロパティの余白とパディングをリセット。*/
  }
  #wrapper {
  	width: 900px;
  	margin: 0 auto;
  	/* 幅固定（900px）でセンタリング。*/
  }
  #header {
  	width: 900px;
  	height: 100px;
  	/* サイトロゴの高さに合わせて調節。*/
  }
  #main {
  	width: 900px;  	/* メニューとコンテンツを囲んで。 */
  	overflow: hidden;  	/* 親ボックスでフロート解除。*/
  	padding-top: 30px;  	/*上インデント*/
  	padding-bottom: 30px;  	/*下インデント*/
  }
  #menu {
  	float: left;
  	width: 200px;
  	/* floatの width 指定は必須。*/
  }
  #contents {
  	float: right;
  	width: 700px;
  	/* floatの width 指定は必須。*/
  }
  #footer {
  	clear: both;
  	/* IE6 以前の float 解除対応。 */
  	width: 900px;
  	height: 50px;
  }
  #menu ul {
  	list-style: none;
  }

  /* 以下スライドショー */
  .slide {
  	position: relative;
  	width: 400px;
  	height: 300px;
  	overflow: hidden;
  }
  @keyframes slideshow {
  	0% {
  		opacity: 0;
  	}
  	10% {
  		opacity: 1;
  	}
  	28% {
  		opacity: 1
  	}
  	38% {
  		opacity: 0;
  	}
  	100% {
  		opacity: 0;
  	}
  }
  .slide img {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: 100%;
  	height: auto;
  	opacity: 0;
  	animation: slideshow 24s linear infinite;
  }
  .slide img:nth-child(2) {
  	animation-delay: 8s;
  }
  .slide img:last-child {
  	animation-delay: 16s;
  }