@charset "Shift-Jis";


/* -------------------- BaseLayout -------------------- */

/* Body */
html, body{
	background-color: #f8fff0;
	color: #223311;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	font-size:10pt;
	height: 100%;
	line-height:14pt;
}

/* 全体 */
.outline{
	margin-top: -8px;
	margin-left: 20px;
	margin-right: 0px;
	height: 100%;
	margin-bottom: 0px;
}

/* メニュー */
.sidemenu{
	position: fixed;
	background-image: url("./base/top.png");
	background-color: #ffffff;
	background-repeat: no-repeat;
	border-left: solid 2px #999999;
	border-right: solid 2px #999999;
	float: left;
	width: 180px;
	padding-top: 0px;
	height: 100%;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.sidemenu2{
	background-image: url("./base/top_another.png");
}

@media(max-width: 950px){
	.sidemenu{
		/* スマホ等の場合はメニューを上に表示します */
		position: static;
		height: auto;
		width: 950px;
		float: none;
		padding-bottom: 5px;
		background-color: #99cc66;
		background-image: none;
		border-top: solid 2px #999999;
		border-bottom: solid 2px #999999;
	}
}

/* メニュー内部 */
ul.menulist{
	background-image: url("./base/white65.png");
	background-repeat: repeat;
	font-family: Verdana, Geneva;
	text-decoration: none;
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0px;
	
}

ul.menulist li a{
	text-decoration: none;
	color: #333333;
	width: 100%;
}

ul.menulist li{
	margin-top; 2px;
	margin-bottom: 2px;
	padding-right: 20px;
	text-align: right;
}

ul.menulist li.mview{
	background-color: #ffffff;
	display: block;
}

ul.menulist li:hover{
	background-color: #ffffff;
}

@media(max-width: 950px){
	ul.menulist{
		background-image: none;
		padding-top: 0px;
		padding-bottom: 10px;
	}
	
	ul.menulist li{
		float: left;
		padding-right: 20px;
		padding-left: 20px;
		font-size: 14pt;
	}
	
	ul.menulist li:hover{
		background-image: url("./base/white65.png");
		background-color: transparent;
	}
	
	ul.menulist li.mview{
		background-image: url("./base/white65.png");
		background-color: transparent;
	}
}


/* メインコンテンツエリア */
.main{
	float: left;
	margin-left: 200px;
	width: 950px;
}

@media(max-width: 950px){
	.main{
		/* スマホ等の場合はメニューと同列に表示します */
		clear: both;
		margin-left: 0px;
	}	
}

/* ヘッダー部 */
h1{
	
}

#description{
	float: left;
}

#counter{
	float: right;
	margin-right: 20px;
}

/* コンテンツ */
.content{
	clear: both;
}

.info{
	padding-bottom: 16px;
}

pre{
	border: solid 1px #999999;
	background-color: #eeeeee;
	font-size: 9pt;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}

h2.subtitle{
	font-size: 14pt;
	padding-top: 12px;
	margin: 6px;
	margin-left: 0px;
	color: #009900;
}

/* セクションエリア */
.section{
	margin-top: 0px;
	margin-left: 6px;
	margin-right: 27px;
	padding: 15px;
	border: #bbbbbb 1px solid;
	box-shadow: 0px 1px 2px #cccccc;
	border-radius: 5px;
	background-color: #fcfffc;
}

.section *{
	margin-top: 0px;
	margin-bottom: 0px;
}

.section p{
	padding-left: 20px;
	padding-bottom: 13px;
	padding-top: 5px;
	line-height: 15pt;
}

h3{
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom: dashed #339933 2px;
	
}

.blogdate{
	text-decoration: none;
	text-align: right;
	padding-right: 5px;
	margin-bottom: -12px;
	color: #779955;
	font-family: Verdana, Geneva;
}

#blogmore{
	text-align: right;
}

.footer{
	
}

.fullview{
	display:inline !important;
}

.fullviewarea{
	display:none;
}

/* Common */
.section a{
	color: #4466FF;
	text-decoration: none;
}
.section a:hover{
	color: #FF8888;
	text-decoration: none;
}

h2 a{
	color: #4466FF;
	text-decoration: none;
}
h2 a:hover{
	color: #FF8888;
	text-decoration: none;
}

img{
	border: none;
}

/* Gellery */
.thumb{
	display: block;
	float: left;
	padding: 10px;
	margin-right: 20px;
	text-align: center;
	width: 160px;
}

.thumb:hover{
	background-color: #f4fff0;
}

/* Creation */
img.icon{
	margin-right: 5px;
	border-radius: 2px;
}

div.charaframe{
	border-radius: 6px;
	margin: 12px;
	padding: 8px;
	margin-bottom: 8px;
	word-break: break-all;
	width: 250px;
	float: left;
	border: 1px solid #cccccc;
}

div.charaframe:hover{
	background-color: #f0fff0;
	cursor: pointer;
	border: 1px solid #3399ee;
}

/* Link */
.linktitle{
	color: #666666;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	background-color: #d0fcd0;
	border: solid #889988 1px;
}

.bn{
	display: block-inline;
	float: left;
	padding: 10px;
	margin-right: 10px;
	width: 240px;
	text-align: center;
}

.bn:hover{
	background-color: #f4fff0;
}

/* -------------------- SectionStyle -------------------- */

.csred{
	font-weight: bold;
	color: #E00;
}

.csblue{
	color: #15E;
}

.cswhite{
	color: #eeffee;
}

.csbold{
	font-weight: bold;
}