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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{ 
	text-decoration: none; 
	outline: none; 
}

.clearfix:after, .imgRight:after, imgLeft:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: "";
		clear: both;
		height: 0;
    }
	* html .clearfix             { zoom: 1; } /* IE6 */
	*:first-child+html .clearfix { zoom: 1; } /* IE7 */
	
body{
  font-family: "メイリオ", "Meiryo UI", "ヒラギノ丸ゴ Pro W4", "小塚ゴシック Pro R", sans-serif;
  letter-spacing: 0.2em;
  background: url(../images/bg.png);
 }
 
#header ,#content, #footer, .nav{
  width:100%;
  min-width:1000px;
  margin:0 auto;
  padding-left:0 !important;
  padding-right:0 !important;
 }
.container {
  width:1000px;
   margin-right: auto;
  margin-left: auto;
 }
#header{
	background-color:#388e3c;
}
#header .container h1{
	display: inline-block;
    *display:inline;
    zoom:1;
	position:relative;
	}
.siteTitle{
		padding-top: 35px;
		padding-bottom: 35px;
	}
.siteTitle a{
		font-size: 30px;
		font-weight:bold;
		color: #aed581;
	}
#search-form{
	float:right;
	position:relative;
	margin-top:35px;
	}
#search-form button{
		position:absolute;
		top:0;
		right:0;
		background:none;
		border:none;
		height:26px;
		cursor: pointer;
	}
#search-form input{
		padding:5px 35px 5px 5px;

	}
.nav{
	background-color:#b9f6ca;
}
.nav .container > ul{
 font-size:0px;/*Reduce Gap Space*/
 letter-spacing:0px;/*Reduce Gap Space*/
 float:left;
}
.nav .container > ul  li{
    display: inline-block;
    *display:inline;
    zoom:1;
	position:relative;
	padding:5px;
}
.nav .container > ul li a{
 display:block;
 font-size:12px;
 font-weight:normal;
 letter-spacing: 0.20em;
 color:#000;
 background: #b9f6ca; 
 padding:15px;
 transition:all 0.3s ease-out;
}
.nav .container > ul  li:hover > ul{
	display: block;
}

.nav .container > ul > li > ul{
	position: absolute;
	width:280px;
	padding:20px 0;
	top:auto;
	left:5px;
	z-index:20;
	background:#4caf50;
	display: none;
	margin-top:5px;
}
.nav .container > ul > li > ul li{
	display:block;
	line-height: 40px;
	}
.nav .container > ul > li > ul li a{
	color:#fff;
	background: #4caf50;
	padding: 0 20px;
	display: block;
	/*transition:all 0.3s ease-out;*/
	}
.nav .container > ul > li > ul li a:hover{
	background: #b9f6ca;
	color: #000;
	
}

.nav ul li a:hover, .nav .container > ul  li:hover > a{
  background-color: #4caf50;
  color:#fff;
}

#left-content{
		background: rgba(255, 255, 255, .3);
		float:left;
		position: relative;
		width: 280px;
		margin-top:30px;
	}
#left-content .writer-info{
		padding:0 20px;
		
	}
.headTitle{
		background-color: #4caf50;
		color: #fff;
		border-radius: 5px;
	}
.writer-info p{
		color: #5d5d5d;
		font-size: 12px;
		display: block;
		padding: 20px 0;
		line-height: 1.5;
	}
#left-content .popular-posts{
		padding:0 20px;	
	}

.pop-post{
	overflow: hidden;
	margin-bottom: 20px;
	border-bottom: dashed 1px #333333;	
	padding: 15px 0;
}
.pop-post img{
	float:left;
	padding-right: 16px;
	}
.pop-post a{
		 padding:0 3px;
		 display: inline-block;
		 font-size:16px;
		 font-weight:normal;
		 color: #5d5d5d;
		line-height: 30px;
		clear: both;
		font-weight: bold;
		margin-bottom: 15px;
	}
.pop-posts a:hover{
		color:#000;
	}
.pop-post p{
		color: #5d5d5d;
		font-size: 12px;
		line-height: 1.5;
	}
#left-content .contents{
		padding:20px 20px;
		
	}
.contents p{
		color: #5d5d5d;
		font-size: 13px;
		display: block;
		padding: 20px 0;
		line-height: 1.5;
	}
.contents ul{
		color: #5d5d5d;
		padding:10px 2px;
	}
.contents ul li a{
		 font-size:13px;
		 padding:15px 5px;
		 display:block;
		 font-size:12px;
		 font-weight:normal;
		 letter-spacing: 0.20em;
		 color: #5d5d5d;
		 padding-left:25px;
		 letter-spacing:1px;
		 border-bottom: dashed 1px #333333;
		
	}
.contents ul li a:hover{
 		color:#000;
	}
#left-content .blog-parts{
		padding:10px 20px;
		
	}
.blog-parts h3{
		padding:14px;
		background-color: #4caf50;
		color: #fff;
		border-radius: 5px;
	}
	
#main-content{
		background: rgba(255, 255, 255, .3);
		float:right;
		position: relative;
		width: 650px;
		padding:20px 0;
		margin-top:30px;
	}
.article{
		margin:0 20px;
		display: block;
		border-bottom: dashed 1px #464646;
		padding-bottom: 10px;
	}
.article h2{
		padding:0 0 5px 0;
		font-size:20px;
		color:#232323;
		
	}
.article span{
		font-size: 12px;
		color:#232323;
	}
.cont{
		margin:0 20px 80px 20px;
		display: block;
		
		
	}
.cont img{
		float:left;
		padding:20px 20px 20px 0;
		}
.cont p{
		color: #5d5d5d;
		font-size:12px;
		line-height: 1.5;
		display:block;
		padding:20px 0;
		
	}
.cont a{
		float:right;
		background-color:#388e3c;
		color:#fff;
		padding:10px;
		border: solid 1px #fff;
		border-radius:7px;
		font-size:10px;
	}
.cont a:hover{
		background-color:#b9f6ca;
		color:#000;	
		border: solid 1px #000;
		font-size:10px;
	}
.art img{
		padding: 20px;
		width: 610px;
		height: 340px;
		
		}
.art p{
		color: #5d5d5d;
		font-size:12px;
		line-height: 1.5;
		display:block;
		padding:20px;
		
	}
	
#footer {
	background-color:#388e3c;
	margin-top: 25px;
	color: #fff;
	padding:25px 0 25px;
	font-size:13px;
	text-align: center;
}