@charset "UTF-8";

/****************************************

          1.Setting

*****************************************/

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
/* IE7 */

ul { list-style: none; }

code { 
	font-family:"Courier New",Courier,monospace; 
	color:#555; 
}

body{
    background :#f7f7f7;
    font-size: 14px;
    line-height: 160%;
    font-family:
    	Verdana, Arial,
    	'ヒラギノ角ゴ Pro W3',
    	'Hiragino Kaku Gothic Pro',
    	Osaka,
    	'ＭＳ Ｐゴシック',
    	sans-serif;
    color: #555;
		background: url(../images/honmon_back4.jpg) no-repeat fixed center top #340404;
	text-align: center;

}

/* font-style */
small {font-size: 80%;}
strong{ font-weight: bold; color:#4d4d4d; }
em { font-weight: bold; font-style: normal; }
.itaric { font-style: italic; }
.small {font-size: 80%; }
.big {font-size: 140%; font-weight: bold; }

.clear {clear: both;}
.hidden {display: none;}
.wrapping { overflow: hidden; }

::selection { color: #555; background-color: #cbf2ff;}
::-moz-selection { color: #555; background: #cbf2ff; }  
:focus {-moz-outline-style: none;}

/* Links */
a,a:visited {
	color:#69aeb3;
	text-decoration: underline;
	-moz-transition: color 0.3s linear;
	-webkit-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
}
	a:hover,a:active{
		color: #3e7471;
		text-decoration: underline;
	}
	
a:active,a:focus {outline:0 none;}

/****************************************

          2. Layout

*****************************************/
html,
body{
	overflow-x: visible;
}

#header{
	height: 215px;
}
	*:first-child+html #header{

	}

#container,.wrapper {
	width : 1000px;
	margin:0 auto;
}

#main{
	width: 1000px;
	float: right;
}

#sidebar{
	width: 220px;
	float: left;
	padding: 0 10px;
}

#footer{
	
}
/****************************************

          3. Header

*****************************************/

#logo {
	width: 240px;
	height: 190px;33333333
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 72px;
	line-height: 100%;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	border-top:25px solid #ccc; /* IE */
	border-top:25px solid rgba(0, 0, 0, 0.1);
}
	*:first-child+html #logo{	
		line-height: 1.5;
	}
	#logo a {
		display:block;
		width: 240px;
		padding-top: 75px;
		height: 115px;
		text-decoration: none;
		-moz-transition: color 0.3s linear; /* Firefox 3.7 */
		-webkit-transition: color 0.3s linear;
		-o-transition: color 0.3s linear;
	}
		*:first-child+html #logo a{	
			padding-top: 0px;
		}
	
#header h2{
	font-family: 'Josefin Sans', sans-serif;
	width: 710px;
	margin-right: 10px;
	float: right;
	line-height: 1;
	font-size: 24px;
	color: #777;
	padding-top: 110px;
	text-align: right;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

	*:first-child+html #header h2{
		padding-top: 60px;
		line-height: 1.5;
	}

#navi {
	width: 800px;
	float: right;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 120%;
	line-height: 25px;
}
	
	#navi li{
		margin: 0;
		padding: 0;
		float: left;
		display: inline;
		width: 200px;
		text-align: right;
	}
	#navi li a{
		color: rgba(0, 0, 0, 0.5);
		display: block;
		text-decoration: none;
		-moz-transition: color 0.3s linear, border-color 0.3s linear;
		-webkit-transition: color 0.3s linear, border-color 0.3s linear;
		-o-transition: color 0.3s linear, border-color 0.3s linear;
		text-shadow: 0 1px 0 rgba(255,255,255,0.8);
		border-right: 1px solid #ccc; /* IE */
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		padding-right: 10px;
	}
		#navi li a:hover{
			color: #3e7471;
			border-right: 1px solid #3e7471;
		}
		
/****************************************

          4. Main

*****************************************/
.archive .post,
.single .post{
	width: 220px;
	margin: 0 10px 20px 10px;
	background: #fff;
	float: left;
}
	.post.pure{ background-color:inherit !important;}
	.archive .post.two,
	.single .post{
		width: 460px;
	}
	.archive .post.three{
		width: 700px;
	}
	.single .post{
		position: relative;
	}
		.single .post .quote-content{
			position: absolute;
			top:0;
		}
	
	.quote-content{width: 100%;}
	.quote{
		background: rgba(0, 0, 0, .2);
		padding: 20px;
		font-family: Georgia, Times, serif;
		font-size: 24px;
		line-height: 130%;
		text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	}
		.balloon {
    		height: 0px;
    		width: 0px;
    		margin-left: 20px;
    		border: 10px solid transparent;
    		border-top-color: rgba(0, 0, 0, .2);
    		border-left-color: rgba(0, 0, 0, .2);
		}
		.quote p{
			font-style: italic;
		}
	
		.archive .post h2,
		.single .post h2{
			font-family: 'Josefin Sans', sans-serif;
			font-size: 18px;
			line-height: 24px;
			float: left;
			vertical-align: baseline;
		}
		
			.archive .post h2{
				width: 176px;
			}
			.archive .post.two h2,
			.single .post h2{
				width: 416px;
			}
			.archive .post.three h2{
				width: 656px;
			}
			
		.post-title{
			padding: 5px 10px;
		}
			.post-title a{
				display: block;
			}
			
			.post-format{
				width: 24px;
				height: 24px;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				background: #69aeb3;
				text-indent: -9999px;
				float: right;
				-webkit-box-shadow:0 1px 1px rgba(0, 0, 1, .4) inset;
           		-moz-box-shadow:0 1px 1px rgba(0, 0, 1, .4) inset;
                box-shadow:0 1px 1px rgba(0, 0, 1, .4) inset;
			}
				.post-format a{
					display: block;
					width: 24px;
					height: 24px;
				}
					.post-format a.image{background: url(images/photo-icon.png) no-repeat 0 0 ;}
					.post-format a.video{background: url(images/video-icon.png) no-repeat 0 0 ;}
					.post-format a.quote{background: url(images/quote-icon.png) no-repeat 0 0 ;}
			
		.post-meta{
			background: #69aeb3;
			color: #fff;
			padding: 5px 10px;
			-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1) inset;
            font-size: 12px;
		}
		
			.post-meta a {
				color: #fff;
			}
				.post-meta a:hover {
					color: #ddd;
				}
			
			.post-meta li{
				float: left;
				display: inline;
				line-height: 16px;
				
			}
				.post-meta .date,
				.post-meta .category,
				.post-meta .tag,
				.post-meta .link{
					padding-left: 22px;
					padding-right: 1em;
					margin: .3em 0;
				}
				.post-meta .date{
					background: url(images/date-icon.png) no-repeat 0 0;
				}
				.post-meta .category{
					background: url(images/category-icon.png) no-repeat 0 0;
				}
				.post-meta .tag{
					background: url(images/tag-icon.png) no-repeat 0 0;
					padding-right: .5em;
				}
					.post-meta .tag li{ margin-right: .3em;}
				
				.post-meta .link{
					background: url(images/link-icon.png) no-repeat 0 0;
				}
			.single .post img,
			.single .post iframe{
				vertical-align: bottom;
			}

		/* Shared styles */
        
        .drop-shadow,
        .drop-shadow img {
            position:relative;

            -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute; 
            z-index:-2;
        }

		.lifted:before,
        .lifted:after { 
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;

            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.2);   
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.2);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.2);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                -ms-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .lifted:after {
            right:10px; 
            left:auto;
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                -ms-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }


#content-sidebar{
	margin-top: 1px;
	width: 220px;
	float: right;
}
	#content-sidebar .module{
		padding: 20px 10px 5px 10px;
		box-shadow: 0 -1px rgba(0, 0, 0, .2), 0 1px rgba(255, 255, 255, .8);
		border-top:1px solid rgba(255, 255, 255, .8);
		border-bottom: 1px solid rgba(0, 0, 0, .2);
		text-shadow: 0 1px rgba(255, 255, 255, .8);
	}
	#content-sidebar p{
		margin-bottom: 15px;
		font-family: Georgia, Times, serif;
	}

/****************************************

          5. Sidebar

*****************************************/

#description{
	font-family: Georgia, Times, serif;
	font-style: italic;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.module{
	position: relative;
	margin-bottom: 40px;
}
.assistive-text{
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
}	

#sidebar .category,
article.category {
	overflow: hidden;
}
#sidebar .category li,
article.category li{
	margin-top: -1px;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 18px;
	line-height: 60px;
	text-align: center;
	border-top: 1px solid #ccc; /* IE */
	border-top: 1px solid rgba(255,255,255,0.8);
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	box-shadow: 0 -1px rgba(0, 0, 0, .2);
}
	article.category li{ text-align: left;}
	#sidebar .category li a,
	article.category li a{
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		-moz-transition: color 0.3s linear;
		-webkit-transition: color 0.3s linear;
		-o-transition: color 0.3s linear;
	}
	
	.tagcloud a{
		background: rgba(0, 0, 0, .3);
		color: #fff;
		text-decoration: none;
		padding: 2px 5px;
		white-space: nowrap;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 -1px rgba(255, 255, 255, .8);
		-webkit-transition: background-color 0.3s linear;
		-moz-transition:background-color 0.3s linear;
		transition:background-color 0.3s linear;

	}
		.tagcloud a:hover{
			background: rgba(0, 0, 0, .5);
		}

/****************************************

          6. footer

*****************************************/

#grid{
	width: 960px;
	margin: 0 auto;
}
	#grid .column{
		height: 25px;
		border-right: 1px solid #ccc; /* IE */
		border-right: 1px solid rgba(0, 0, 0, .2);
		float: left;
		width: 239px;
	}
		#grid .first{
			border-left: 1px solid #ccc; /* IE */
			border-left: 1px solid rgba(0, 0, 0, .2);
			width: 238px;
		}
		
#footer .wrapper{
	border-top: 1px solid #ccc; /* IE */
	border-top: 1px solid rgba(255, 255, 255, .8);
	box-shadow: 0 -1px rgba(0, 0, 0, .2);
	padding: 20px 0;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	background: none;
}
	#seeyou{
		font-family: 'Josefin Sans', sans-serif;
		color: #69aeb3;
		/*font-size: 24px;*/
		width: 240px;
		text-align: center;
		float: left;
	}

	#footer a{ text-decoration: none;}
	#footer small{
		float: right;
		font-family: Georgia, Times, serif;
		font-style: italic;
	}
		#footer small a{
			font-style: italic;
		}

/****************************************

          7. 404

*****************************************/
.four04{
	padding: 0 10px;
	text-shadow: 0 1px rgba(255, 255, 255, .8);
}
	.four04 h2{
		font-family: 'Josefin Sans', sans-serif;
		font-size: 72px;
		line-height: 100%;
	}
	.four04 p{
		font-family: Georgia, Times, serif;
		font-style: italic;
	}

/****************************************

		8. WP Pagwnavi

*****************************************/

.wp-pagenavi {
	clear: both;
	font-size:100%;
	font-family: 'Josefin Sans', sans-serif;
	line-height: 1.3;
	padding-top: 20px;
	margin-bottom: 20px;
	margin-left: 10px;
}
	.wp-pagenavi span.pages{ display:none;}
	.wp-pagenavi a,
	.wp-pagenavi span {
		text-decoration: none;
		border: 0 none;
		padding: 5px 10px;
		margin:0 2px;
		background: rgba(0, 0, 0, 0.3);
		color:#fff;
		border-bottom: 1px solid #fff;
		border-top: 1px solid rgba(0, 0, 0, .2);
		display: block;
		line-height:24px;
		height: 24px;
		vertical-align: bottom;
		white-space: nowrap;
		float: left;
		width: auto; /* iPhone Safari�p */
	}
		.wp-pagenavi a:hover{ 
			background: #69aeb3;
			color: #fff;
		}
		.wp-pagenavi span.current {
			font-weight: bold;
			 background: #69aeb3;
			 color: #fff;
		}

/****************************************

          9. Back to top button 

*****************************************/

#back-top {
	position: fixed;
	bottom: 101px;
	overflow: hidden;
	float: left;
	margin-left: 860px;
	z-index: 1000;
}
#back-top a {
	width: 100px;
	height: 25px;
	display: block;
	font-size: 12px;
	text-decoration: none;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	font-family: 'Josefin Sans', sans-serif;
	line-height: 25px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
	position: relative;
	margin-bottom: 7px;
}
#back-top a:hover {
	color: #3e7471;
}

#back-top span {
	width: 25px;
	height: 25px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	background: #69aeb3;
	text-align: center;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	font-size: 120%;
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 0 rgba(0,0,0,.2);
	box-shadow: 0 1px 0 rgba(0,0,0,.2);
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	color: #fff;
}
#back-top a:hover span {
	background-color: #3e7471;
	color: #fff;
}

/****************************************

          10. Button

*****************************************/

.green-button{
	display: block;
	position: relative;
	width: 220px;
	height: 67px;
	background: url(images/green-button.png) 0 0;
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;
	color: #fff !important;
	line-height: 50px;
	text-decoration: none;
	font-size: 24px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
	text-decoration: none !important;
}
		
	/*.green-button:hover{
		background-position: 0 -70px;
		text-decoration: none;
	}*/
	
	.green-button span.hover{
		position: absolute;
		top:0;
		left: 0;  
    	display: block;  
    	height: 67px;  
    	width: 220px;
    	background: url(images/button.jpg) 0 -70px;
   }
   
   .button.pure{background:url(images/body-bg.gif) repeat;}

/****************************************

          10. Clear & Alignment

*****************************************/

.clear {
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}
.textleft {
	text-align: left;
}
.textright {
	text-align: right;
}
.textcenter {
	text-align: center;
}

/* clearfix */
.clearfix:after,
#container:after,
#header:after,
.wp-pagenavi:after { 
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix, 
#main,
#header,
#container,
.wp-pagenavi { 
	display: inline-block; 
}

/* clearfix for ie7 */
.clearfix,
#main,
#header,
#container,
.wp-pagenavi { 
	display: block; 
}

/****************************************

		11. warning bar for IE

*****************************************/	
#warning_bar{
	text-align:center;
	background:#F5DEB3;
	color:#000;
}
	#warning_bar a,#warning_bar a:hover,#warning_bar a:visited{ color:#FF0000; }
