@charset "shift_jis";

/* 本体 */
body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	background: #f0f0f0;
	font-family: Verdana,"MS PGothic",Osaka,Arial,sans-serif;
}
a:link { color:#65ab31; }
a:visited {color:#f39800; }
a:hover {
	text-decoration: underline !important;
	color: #dd0000;
}
h1 {
	font-size:150%;
	font-style: italic;
	text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4),1px 1px 1px rgba(255, 255, 255, 0.5);
	margin: 0 3px;
	color:#ffffff;
}
/* ヘッダー */
div.head-ttl {
	background: #003399;
	width: 640px;
	padding: 5px;
	text-align: left;
}
div.head-ttl strong {
	color: #fff;
	margin-left: 2em;
}
div.head-btn {
	/*width: 640px;*/
	text-align: right;
	margin-top: 0em;
	margin-right: 1em;
}
div#head {
	width: 100%;
	background-image: url(wp.png);
	background-color: #323232;
	/*background-image: -webkit-gradient(linear, center top, center bottom, from(#f3e5ff), to(#323232)); 
	background-image: -moz-linear-gradient(bottom, #f3e5ff, #323232);
	background-image: linear-gradient(to bottom, #f3e5ff, #323232);*/
	color: #fff;
}
div#head-in {
	padding: 3px 20px;
}
div#all {
	background: #fff;
	margin: 0 auto;
	width: 1050px;
	padding: 1em;
	text-align: center;
}
hr {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0))
}
/* 本文 */
table.body {
	width: 640px;
	margin: 1em auto;
}
table.body td {
	padding: 5px;
	text-align: center;
}
td.year {
	width: 40px;
}
div.msg {
	width: 670px;
	text-align: center;
	margin: 1em auto;
	padding: 12px;
	color: #003399;
	/*background: #e6e6ff;*/
	line-height: 150%;
	letter-spacing: 3px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow: 1px 2px 10px 1px #aaaab0;
	-webkit-box-shadow: 1px 2px 10px 1px #aaaab0;
	-moz-box-shadow: 1px 2px 10px 1px #aaaab0;
}
div#top-cal {
	width: 720px;
	text-align: center;
	margin: 2em auto;
	padding: 8px;
	color: #003399;
	background-image: url(calbg01.jpg);
	box-shadow: 1px 2px 10px 1px #aaaab0;
	-webkit-box-shadow: 1px 2px 10px 1px #aaaab0;
	-moz-box-shadow: 1px 2px 10px 1px #aaaab0;
}

/* 日記閲覧画面 */
div#diary {
	background: #fff;
	width: 1060px;
	margin: 0 auto;
	padding: 1em;
	text-align: center;
}
div.main {
	float: left;
	width: 800px;
}
div.art-com {
	margin-left: 1.5em;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	font-size: 100%;
}
/* 画像表示枠 */

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.snapshot {
	float: left;
	width: auto;
	padding: 10px;
	background: #fff;
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
	position: relative;
	margin:0 1.2em 0.5em 0;
}

.snapshot .baseImage {
	width: auto;
	height: 134px;
}

.snapshot .coverImage {
	position: absolute;
	left: 45%;
	top: 4.2em;
	opacity: 0.8;
}
.snapshot a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
/* 年月タイトル */
div.main-head {
	position: relative;
	margin: 1.2em 1em;
	padding: 0.5em 0.5em 0.5em 1.7em;
	border-bottom: 1px dotted #221111;
	font-weight: bold;
	color: #460e44;
	font-size: 120%;
	text-align: left;
}
div.main-head:before{
	content: "";
	position: absolute;
	background: #d48789;
	top: 0;
	left: 0.7em;
	height: 12px;
	width: 12px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
 
div.main-head:after{
	content: "";
	position: absolute;
	background:#d26466;
	top: 1.0em;
	left: 0.3em;
	height: 8px;
	width: 8px;
	transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
}

/* 戻りボタン */
div.back-btn {
	text-align: right;
	margin-top: 0em;
	margin-right: 1em;
}

/* 日記本文 */
div.main-body {
	background: #fff;
	width: 780px;
	padding: 12px;
	text-align: left;
	margin: 1.2em auto;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow: 1px 2px 10px 1px #aaaab0;
	-webkit-box-shadow: 1px 2px 10px 1px #aaaab0;
	-moz-box-shadow: 1px 2px 10px 1px #aaaab0;
}
div.main-body img {
	border: none;
	margin-right: 3px;
}
div.main-body span {
	color: #666;
}
img.icon {
	border: none;
	vertical-align: middle;
}
div.date {
	float: right;
	color: green;
	margin-right: 0.7em;
	margin-top: 0.7em;
}
div.body-ttl {
	font-weight: bold;
	margin: 10px 0;
	font-size: 120%;
	color: #9f5000;
}
div.main-foot {
	width: 580px;
	text-align: left;
	font-family: verdana,helvetica,arial;
	font-size: 90%;
}
div.calen {
	float: left;
	width: 230px;
	text-align: center;
	margin-left:1.5em;
	margin-top: 4em;
}
div.clear {
	clear: both;
}

/* カレンダー */
table#calendar {
	font-family: verdana,helvetica,arial;
	margin: auto;
	border:1px solid #ccc;
	border-collapse: separate;
	border-spacing: 0;
	padding: 0 0.7em 0.7em 0.7em;
}
table#calendar th {
	font-size: 12pt;
	height: 30px;
	font-weight: normal;
	padding: 4px;
}
table#calendar th span {
	display: inline-block;
	margin: 0 8px;
}
table#calendar td {
	font-size: 12px;
	padding: 2px 3px;
	text-align: center;
}
table#calendar tr.day td {
	color: #969696;
	background: #fffff5;
	border-bottom: 0.5px solid #ccc;
	height: 28px;
	width: 27px;
}
table#calendar td.sun {
	color: #d50000;
	background: #f7f6f5;
}
table#calendar td.sat {
	color: #0000ce;
	background: #f7f6f5;
}
table#calendar td.week {
	background: #f7f6f5;
}
th.btn img {
	border: none;
	margin-bottom: 0;
}
/* POP-UP */
div.pop-body {
	background: #fff;
	width: 800px;
	padding: 12px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow: 1px 2px 10px 1px #aaaab0;
	-webkit-box-shadow: 1px 2px 10px 1px #aaaab0;
	-moz-box-shadow: 1px 2px 10px 1px #aaaab0;
	text-align: left;
	margin: 0 auto 1.2em auto;
}
div.pop-body img {
	border: none;
	margin-right: 3px;
}

/* エラー文字色 */
p.err {
	color: #dd0000;
}

/* 寄せ */
.ta-c {
	text-align: center;
}

/* copyright */
p.copy a {
	text-decoration: none;
}

/* アイコン */
img.icon {
	border: none;
	vertical-align: middle;
	margin-right: 8px;
}

/* ボタン */
input.btn {
	font-size: 12px;
	font-family:Verdana,"MS PGothic",Osaka,Arial,sans-serif;
	width: 100px;
	height: 30px;
}
/* YouTube表示枠 */
div#tube {
	float: left;
	margin: 0.5em auto 1.5em auto;
}
.imageCover {
	float: left;
	width: 240px;
	padding: 10px;
	background: #fff;
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
	position: relative;
	margin:0.5em;
}

.imageCover .baseImage {
	width: 240px;
	height: 154px;
}

.imageCover .coverImage {
	position: absolute;
	left: 6.4em;
	top: 3.5em;
	opacity: 0.8;
}
.imageCover a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
/* アルバム枠 */
div#album {
	width: 800px;
	margin: 1em auto;
	text-align: center;
}
div.photo {
	border-bottom:1px solid #d4d9dc;
	border-right:1px solid #d4d9dc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 2px 14px 1px #C0C0C0;
	-moz-box-shadow: 1px 2px 14px 1px #C0C0C0;
	box-shadow: 1px 2px 14px 1px #C0C0C0;
	background: #ffffff;
	color: gray;
	width: 700px;
	height: 240px;
	padding:1em;
	margin: 12px auto;
}
/* アルバム表示デザイン設定 */
div.image {
	text-align: center;
	margin: 2em auto 0.7em auto;
}
div.caption {
	text-align: center;
	margin: 10px auto;
}

.img {
	border: none;
	vertical-align: middle;
	margin-right: 1em;
}
/* ワード検索 */
div#reg-area {
	padding: 0;
	width: 92%;
	margin: 1.2em auto;
}
div#reg-box {
	width: 680px;
	margin: 1.2em 1.5em;
	padding: 18px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 10px #666;
	-moz-box-shadow: 0px 1px 10px #666;
	box-shadow: 0px 1px 10px #666;
	/*border: 1px solid #808080;*/
	background: #fff;
	text-align: left;
}
input.reg-word {
	width: 250px;
	padding: 4px;
	color: #444;
	border: solid 1px #f3a68c;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
	box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}
/*
	ページャー
	[ref] http://css-happylife.com/template/page_nav/
*/
ul.pager {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	font-size: 90%;
}
ul.pager li {
	display: inline;
	margin: 0 1px;
	padding: 0;
}
ul.pager li span {
	display: inline-block;
	margin-bottom: 5px;
	padding: 3px 8px;
	background: #434da2;
	color: #fff;
	border: 1px solid #434da2;
	text-decoration: none;
	vertical-align: middle;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
ul.pager li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 3px 8px;
	background: #fff;
	color: #61543a;
	border: 1px solid #941f57;
	text-decoration: none;
	vertical-align: middle;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
ul.pager li a:hover {
	background: #941f57;
	border-color: #941f57;
	color: #fff;
}

/* for smartphone */
@media only screen and (max-width: 480px) {
	div#all {
		background: #fff;
		margin: 0 auto;
		width: 100%;
		padding: 0;
		text-align: center;
	}
	div#top-cal {
		width: 100%;
		text-align: center;
		margin: 2em auto;
		padding: 8px 0;
		color: #003399;
		background-image: url(calbg01.jpg);
		box-shadow: 1px 2px 10px 1px #aaaab0;
		-webkit-box-shadow: 1px 2px 10px 1px #aaaab0;
		-moz-box-shadow: 1px 2px 10px 1px #aaaab0;
		font-size:9pt;
	}
	/* メニューボタン */
	div.head-btn {
		width: 100%;
		margin: 0em auto;
	}
	/* ボタン */
	input.btn {
		font-size: 11px;
		font-family:Verdana,"MS PGothic",Osaka,Arial,sans-serif;
		width: 65px;
		height: 30px;
	}
	#message {
		width: 98%;
		margin: 1em auto;
		padding: 2px;
		line-height: 120%;
		letter-spacing: 1px;
	}
	.head-ttl, .head-btn {
		width: 98%;
		margin: .5em auto;
		padding: 2px;
	}
	table.body {
		width: 98%;
		margin: 0 auto;
	}
	table.body td {
		padding: 0px;
	}
	td.year {
		width: 2em;
	}
	/* 日記閲覧画面 */
	div#diary {
		background: #fff;
		width: 92%;
		margin: 0 auto;
		text-align: center;
	}
	div.diary {
		width: 100%;
		margin: 0 auto;
	}

	div.main, div.calen {
		float: none;
		width: 100%;
	}
	/* 年月タイトル */
	div.main-head {
		position: relative;
		margin: 1.2em 1em;
		padding: 0.5em 0.5em 0.5em 1.7em;
		border-bottom: 1px dotted #221111;
		font-weight: bold;
		color: #460e44;
		font-size: 110%;
		text-align: left;
	}
	div.main-head:before{
		content: "";
		position: absolute;
		background: #d48789;
		top: 0;
		left: 0.7em;
		height: 12px;
		width: 12px;
		transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	}
 
	div.main-head:after{
		content: "";
		position: absolute;
		background:#d26466;
		top: 1.0em;
		left: 0.3em;
		height: 8px;
		width: 8px;
		transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
	}
	/* 記事枠 */
	div.main-body, div.pop-body {
		width: 94%;
		padding: 2px;
		margin-bottom: .5em;
		font-size:10.5pt;
		line-height:1.6;
	}
	div.body-ttl {
		font-weight: bold;
		margin: 10px 0 10px 1.2em;
		font-size: 100%;
		color: #9f5000;
	}
	img.icon {
		border: none;
		vertical-align: middle;
		width:24px;
	}
	div#reg-box {
		width: 96%;
		margin: 1.2em auto;
		padding: 12px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: 0px 1px 10px #666;
		-moz-box-shadow: 0px 1px 10px #666;
		box-shadow: 0px 1px 10px #666;
		/*border: 1px solid #808080;*/
		background: #fff;
		text-align: left;
		font-size:11pt;
}
	div.back-btn {
		width: 100%;
		margin: 2px;
	}
	#err {
		width: 98%;
		padding: 3px;
		margin: 1em auto;
		border: 1px dotted red;
	}
	/* アルバム枠 */
	div#album {
		width: 96%;
		margin: 1em auto;
		text-align: center;
	}
	div.photo {
		border-bottom:1px solid #d4d9dc;
		border-right:1px solid #d4d9dc;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: 1px 2px 14px 1px #C0C0C0;
		-moz-box-shadow: 1px 2px 14px 1px #C0C0C0;
		box-shadow: 1px 2px 14px 1px #C0C0C0;
		background: #ffffff;
		color: gray;
		width: 92%;
		height: auto;
		padding:0.5em;
		margin: 12px auto;
	}
	/* アルバム表示デザイン設定 */
	div.image {
		text-align: center;
		margin: 2em auto 0.7em auto;
	}
	.img {
		border: none;
		vertical-align: middle;
		margin-right: 1em;
		margin-bottom:10px;
	}
}