@charset "utf-8";
/* CSS Document */

.cf:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.cf{display: inline-block;} 


body{font-size:14px;
	color:#333;
font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic' !important;
	width:800px;
	margin:0 auto!important;
	line-height:inherit;}


#wrapper{
	border: solid 3px #F2E3DD;
    padding:0 2%;
	
	}

h1{font-size:12px;
	color:#000;
	}
	
	
	
hgroup{
	text-align:center;
	margin:5% 0;
	}
	
hgroup h2{font-size:30px!important;
	font-weight:bold!important;}
	
nav ul li{
	display:inline;
	padding:2%;
	}
nav ul{
	text-align:center;
	margin:5% auto;
	border-top:solid 2px #F2E3DD;
	border-bottom:solid 2px #F2E3DD;
	padding:5%;}
	
nav ul li a{
	text-decoration:none;
	font-weight:bold;
	color:#666;
	}
	
nav ul li:hover{
	background-color:#F2E3DD;
	}
	
	
#main{
	width:55%;
	float:left;
	padding-right: 5%;
	border-right: dotted 1px #c3bcbc;
    box-sizing: border-box;
	}
	
#side{
	width:40%;
	float:left;
	padding-left:2%;
	}
	
	
#main h2{
	font-size:25px;
	font-weight:bold;
	line-height:1.4em;
	margin-bottom:1%;
	
	}
	
#main p img{
	width: 100%;
    height: auto;
	
	}
	

	
time{color:#E4E4E4;
	
	}
	
.text{
	line-height:2.0em;
	font-size:15px;
	margin-top:2%;
	
	}	
	
#side p{
	font-weight:bold;
	font-size:18px;
	margin-bottom:3%;
	}
	
#side ul li a{
	text-decoration:none;
	color:#000;
	}

#side ul li{
	list-style-type: disc;
	list-style-position: inside;
	font-size:14px;
	margin-bottom:1%;
	}
	
	
#side ul li a:hover{
	color:#F2E3DD;
	}
	
#side ul li:hover{
	color:#F2E3DD;
	}
	
	
footer{text-align: center;
		margin-top:5%;}
		
		
@media screen and (max-width: 414px) {
	#main,#side{
	float:none;
	width:100%;
	border:0;
	padding:0;
	}
	

	
	#side{
		margin-top:5%;
		
		}
	
	body{width:100%;}
	
	nav ul{padding:0;}
	
	nav ul li{padding:1%;
			  font-size:13px;
			  background:#F6F6F6;}
	
	
	
	
	}