@charset "euc-jp";

/*ウェブフォント*/
@font-face {
	font-family:'misaki';
	src:url(misaki_gothic.ttf) format("truetype");
}

/*最初にやっておくおまじない*/
html,body{
	box-sizing:border-box;/*幅や高さの指定が楽になる*/
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

/*背景*/
body{
	font-family:'misaki';/*ドット絵風フォント*/
	background:url("../photo/bg/sprinkles.png");/*背景指定*/
}

/*全体を中央よせ*/
#wrapper{
	margin:0 auto;
	width:95%;
}

/*ナビゲーション*/
nav{
	width:700px;
	margin:0;
	text-align:center;
}
	/*clearfix*/
	nav:after{
		content: "."; 
		display: block; 
		height: 0; 
		font-size:0;	
		clear: both; 
		visibility:hidden;
	}
	nav ul{
		margin:0 auto;
		padding:0;
		list-style:none;
	}
	/*横に並べる*/
	nav ul li{
		float:left;
	}
	/*ボタンデザイン*/
	nav ul li a{
		display:block;
		text-align:center;
		padding:5px 10px;
		width:120px;
		color:#b88;
		font-size:2em;
		text-decoration:none;
		font-weight:bold;
		transition:0.3s;
	}
	/*マウスオーバー時*/
	nav ul li a:hover{
		background:#333;
		color:#fff;
		box-shadow:0 0 10px rgba(255,255,255,0.8) inset;
		text-shadow:none;
	}
	/*マウスクリック時*/
	nav ul li a:active{
		/*クリックするとしぼむ*/
		-webkit-transform:scale(0.8);/*chrome*/
		-moz-transform:scale(0.8);/*firefox*/
		transform:scale(0.8);/*その他*/
	}

/*メニュー以外囲い*/
#container{
	background:#fff;/*背景を白*/
	box-shadow:0 0 10px rgba(0,0,0,0.5) inset;/*内側に影*/
}

/*更新履歴*/
.history{
	float:left;/*横に並べる*/
	width:45%;
	border-radius:10px;
	border:solid 3px #ebb;\
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	margin:10px;
}
	/*更新履歴内の見出し*/
	.history h2{
		font-size:1em;
		background:none;
		border:none;
		padding:0;
		margin:0;
	}
	/*更新履歴内の箇条書き*/
	.history ul{
		list-style:Square;
	}

/*ポエム*/
.poem{
	float:left;
	width:45%;
	border-radius:10px;
	border:solid 3px #ebb;
	padding:10px;
	margin:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	text-align:center;
}
/*タイル状に並べてる物*/
.item{
	background:#fff;/*背景*/
	border-radius:10px;/*角を丸める*/
	box-shadow:0 0 10px rgba(0,0,0,0.3);/*影をつける*/
	width:30%;/*基本幅*/
	min-width:220px;/*最小幅*/
	max-width:280px;/*最大幅*/
	min-height:180px;/*最小高さ*/
	text-align:center;/*中身を中央寄せ*/
	margin:10px;/*タイル同士の間隔*/
	padding-top:30px;/*上余白*/
}
	.item h3{
		background:none;
		border:none;
		margin:0;
		padding:0;
	}
/*リンク募集中*/
.banner{
	background:#fff;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	text-align:center;
	margin:10px;
	min-width:80px;
	min-height:50px;
}

/*見出しデザイン*/
h1{font-size:2em;}
h2{font-size:1.2em;}
h3{font-size:1em;}
h4{font-size:0.8em;}
h1,h2,h3,h4{/*おされな見出しに*/
	margin:0 0;
	position:relative;
	padding:5px 20px;
	color:#333;
	background:#fff;
	text-shadow:
		1px 1px 0 #fff,
		2px 2px 0 #999;
	border-top:#333 solid 3px;
	border-bottom:#333 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
			from(			rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(255, 255, 255, 0.0)),
			to(				rgba(255, 255, 255, 0.0))
			);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}

/*aタグデザイン*/
a{
	color: #03c;
	transition: 0.3s;/*マウスオーバー時フワァ*/
}
	a:hover {
		color: #fff;
		text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
	}
/*横に並べるの解除*/
.clearfix:after{
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility:hidden;
}