/*
Theme Name: harashoji
Theme URI: http://www.harashoji.jp/
Author: harashoji
Author URI: http://www.harashoji.jp/
Text Domain: harashoji
*/

html { color:#000; background:#FFF; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fiel
dset,legend,input,textarea,p,blockquote,th,td { margin:0;padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
img{vertical-align:bottom;}
address,caption,cite,code,dfn,em,strong,th,var { fontstyle:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; font-variant:normal; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
input,textarea,select { font-family:inherit; font-size:inherit;font-weight:inherit; *font-size:100%; }
legend { color :#000; }
#yui3-css-stamp.cssreset { display:none; }

/* ########################################

	基本設定 

 ########################################## */

html{
	color:#333;
	background-color:#fff;
	line-height:1.8;
	font-size:0.9rem;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
a{
	color:#c00;
}
a:hover{
	color:#f00;
}
a:hover img{
	opacity:0.8;
	filter: alpha(opacity=80);
}
/* 見出し設定 */

.title01{
	margin-bottom:20px;
	background-color:#2775FF;
	padding:5px;
	color:#fff;
}
.title02{
	margin-bottom:20px;
	border-bottom:5px solid #E17E00;
	padding:5px;
}
.title03{
	margin-bottom:10px;
	border-left:10px solid #D80003;
	padding:2px 0 2px 5px;
}
#wrapper img{
	max-width:100%;
	height:auto;
}
#main p{
	margin-bottom:1rem;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
/* CSSボタン */
.banner a{
	margin:10px auto;
	display:block;
	width:70%;
	background-color:#c00;
	padding:5px 0;
	color:#fff;
	text-align:center;
	text-decoration:none;
	border-radius:5px;
}
.banner a:hover{
	background-color:#a00;
}
/* -------------------------------------------
	CLEAR-FIX
---------------------------------------------- */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* -------------------------------------------
	Utility
---------------------------------------------- */

/* Margin
-------------*/
#wrapper .m0{margin:0}
#wrapper .m5{margin:5px;}
#wrapper .m10{margin:10px}
#wrapper .m15{margin:15px;}
#wrapper .m20{margin:20px;}

#wrapper .mt5{margin-top:5px;}
#wrapper .mt10{margin-top:10px;}
#wrapper .mt15{margin-top:15px;}
#wrapper .mt20{margin-top:20px;}
#wrapper .mt30{margin-top:30px;}
#wrapper .mt50{margin-top:50px;}
#wrapper .mt100{margin-top:100px;}

#wrapper .ml5{margin-left:5px;}
#wrapper .ml8{margin-left:8px;}
#wrapper .ml10{margin-left:10px;}
#wrapper .ml15{margin-left:15px;}
#wrapper .ml20{margin-left:20px;}
#wrapper .ml30{margin-left:30px;}
#wrapper .ml40{margin-left:40px;}
#wrapper .ml50{margin-left:50px;}

#wrapper .mr5{margin-right:5px;}
#wrapper .mr10{margin-right:10px;}
#wrapper .mr15{margin-right:15px;}
#wrapper .mr20{margin-right:20px;}

#wrapper .mb5{margin-bottom:5px;}
#wrapper .mb10{margin-bottom:10px;}
#wrapper .mb15{margin-bottom:15px;}
#wrapper .mb20{margin-bottom:20px;}
#wrapper .mb30{margin-bottom:30px;}
#wrapper .mb50{margin-bottom:50px;}
#wrapper .mb100{margin-bottom:100px;}
/* padding 
---------------------*/
#wrapper .p5{padding:5px;}
#wrapper .p10{padding:10px;}

#wrapper .pt10{padding-top:10px;}
#wrapper .pt20{padding-top:20px;}
#wrapper .pb20{padding-bottom:20px;}

/* Float
---------------------*/
.fl{float:left}
.fr{float:right;}
.cl{clear:both;}

/* cursor
-------------------*/
.cp{cursor:pointer;}
.fcr{color:#fff;}
.attention{
	color:#f00;
	font-weight:bold;
}

/* width
--------------------*/
.w50{width:50px;}
.w100{width:100px;}
.w130{width:130px;}
.w200{width:200px;}
.w220{width:220px;}
.w245{width:245px;}
.w270{width:270px;}
.w300{width:300px;}
.w330{width:330px;}
.w400{width:400px;}
.w500{width:500px;}
.w570{width:570px;}
/* align
------------------- */
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}


/* -------------------------------------------
	WordPress Editor
---------------------------------------------- */

img.size-auto,
img.size-large,
img.size-full,
img.size-medium {
	max-width: 100%;
	height: auto;
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #f1f1f1;
	border: none;
	-khtml-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	color: #888;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 20px;
	padding: 4px;
	text-align: center;
}
.wp-caption img {
	margin: 5px;
}
.wp-caption p.wp-caption-text {
	margin: 0 0 4px;
}
.wp-smiley {
	margin: 0;
}

.post-content h1{font-size:48px; font-weight:bold; line-height: 150%; }
.post-content h2{font-size:36px; font-weight:bold; line-height: 150%; }
.post-content h3{font-size:24px; font-weight:bold; line-height: 150%; }
.post-content h4{font-size:18px; font-weight:bold; line-height: 150%; }
.post-content h5{font-size:14px; font-weight:bold; line-height: 150%; }
.post-content h6{font-size:12px; font-weight:bold; line-height: 150%; }
.post-content h7{font-size:10px; font-weight:bold; line-height: 150%; }
.post-content ul,
.post-content ol{
	padding:10px 0 10px 20px;
}
.post-content ul li{
	list-style:disc;
}
.post-content ol li{
	list-style:decimal;
}
.post-content blockquote{
	margin:10px 20px;
	font-style:italic;
	color:#999;
}

/* --------------------------------------------------------------
	CSS3 Utirity
----------------------------------------------------------------- */
.radius {
	border-radius: 10px;
}
.shadow {
	-webkit-box-shadow: 5px 5px 8px #f1f1e2;
	-moz-box-shadow: 5px 5px 8px #f1f1e2;
	box-shadow: 5px 5px 8px #f1f1e2;
}
.pc{display:block}
.mobile{display:none}

/* ##########################################################################

	レイアウト設定 widthなどはサイトによって変更してください

 ########################################################################## */
.inner,
#pagetop{
	margin:0 auto;
	width:980px;
}

/* ---- サイト全体のカラム設定 ---- */
#column-one{
	margin:20px 0 100px;
	width:100%;
}
#column-right,
#column-left,
#column-three{
	margin:20px auto 100px;
	width:980px;
}
/* 右カラム */
#column-right #main{
	width:700px;
	float:left;
}
#column-right .sidebar{
	width:250px;
	float:right;
}
/* 左カラム */
#column-left #main{
	width:700px;
	float:right;
}
#column-left .sidebar{
	width:250px;
	float:left;
}
/* ３カラム */
#column-three #main{
	margin:0 20px;
	width:500px;
	float:left;
}
#column-three .sidebar{
	width:220px;
	float:left;
}
/* １カラム */
#column-one section{
	margin:0 auto;
	width:980px;
}
#column-one section.w-all{
	width:100%;
}


/* ヘッダーの設定 */
header .inner{
	position:relative;
	overflow:hidden;
}

header #header-logo{
	float:left;
}
header #header-tel{
	float:right;
}
header nav{
	width:100%;
	background-color:#BEE4FB;
	z-index:10;
}
header nav #global-navi{
	margin:0 auto;
	width:980px;
}
header nav #global-navi li{ 
	float:left;
	width:196px;
	position:relative;
}
/* ヘッダー固定 */

/* ヘッダー全体を固定する場合
header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-color:#fff;
	z-index:20;
}
#wrapper{
	margin-top:135px;
}
 */
/* ヘッダーナビ部分を固定する場合 */

.fixed header nav{
	position:fixed;
	top:0;
	left:0;
	z-index:20;
}

/* スマホ用のヘッダー */
.mobile-menu{
	display:none;
}
/*固定ナビゲーションのheightを入力 */
.fixed header{
	margin-bottom:50px;
}
/* ヘッダープルダウン */
header nav #global-navi>li>ul{
	display:none;
	position:absolute;
	z-index:10;
}
header nav #global-navi>li>ul li a{
	padding:10px;
	display:block;
	background-color:#fcc;
	border-bottom:1px solid #ccc;
}
header nav #global-navi>li>ul li a:hover{
	background-color:#fcf;
}

/* メイン画像領域 */
#main-image{
	text-align:center;
}
/* Flexslider使う時 ブラウザ幅の可変に対応 */
#main-image .flexslider{
	margin:0 auto;
	max-width:1280px;
}
/* パンくずリスト */
#breadcrumb{
	margin:20px auto 20px;
	width:980px;
	font-size:0.8rem;
}

/* サイドバー設定 */

.sidebar .widget{
	margin-bottom:30px;
}
.sidebar .widget p{
	margin-bottom:1rem;
}
.sidebar .widget h3{
	border-bottom:2px solid #999;
}
.sidebar .widget ul li a{
	display:block;
	padding:10px;
	border-bottom:1px dashed #ccc;
}
.sidebar .widget ul li a:hover{
	background-color:#f0f0f0;
}
.sidebar input{
	max-width:60%;
}
/* サイドバーブログカレンダー */
.sidebar #wp-calendar{
	width:100%;
}
.sidebar #wp-calendar caption{
	text-align:center;
}
.sidebar #wp-calendar thead th,
.sidebar #wp-calendar tbody td{
	text-align:center;
	border:1px solid #CCC;
}
.sidebar #wp-calendar tbody .pad{
	background-color:#f0f0f0;
}
.sidebar #wp-calendar tbody #today{/*今日のセル*/

}

/* フッター設定 */
#pagetop{
	text-align:right;
}
footer {
	border-top:1px solid #ccc;
}
footer .inner{
	position:relative;
}

footer #footer-logo{
}
footer .sitemap{
	margin:20px 0;
	overflow:hidden;
}
footer .sitemap li{
	padding:5px 20px;
	border-left:1px solid #ccc;
	float:left;
}
footer .sitemap li:last-child{
	border-right:1px solid #ccc;
}
#copyright{
	text-align:center;
	background-color:#333;
	color:#fff;
	font-size:0.8rem;
}
/* ##########################################################################

	コンテンツパターン設定

 ########################################################################## */
 
 /* リストブロック関連 widthは％で指定していますが、必要に応じてpxになおしてください 
 左右をピッタリにする場合はpxで指定しなおしてください。
 （例）980pxの場合は
 .flt02{width:1000px;margin-right:-20px;}←はみ出す部分をネガティブマージンで調整するとピッタリきます。
 .flt02 li{width:480px;margin-right:20px;}
 -------------------------------------------------------------------------------------------*/
/*
.flt02,
.flt03,
.flt04,
.flt05,
.flt06{
	overflow:hidden;
}
.flt02 li,
.flt03 li,
.flt04 li,
.flt05 li,
.flt06 li{
	float:left;
	border:1px solid #ccc;
}
.flt02 li{
	margin:0 1% 10px;
	width:48%;
}
.flt03 li{
	margin:0 1% 10px;
	width:31%;
}
.flt04 li{
	margin:0 1% 10px;
	width:23%;
}
.flt05 li{
	margin:0 1% 10px;
	width:18%;
}
.flt06 li{
	margin:0 1.3% 10px;
	width:14%;
}
*/

/*
ブロック並びに関しては、floatからdisplay:flexを採用しています。
IEなどの仕様によっては、上記floatの方を使ってください。
----------------------------------------------------------------------------------------------- */

.flt02,
.flt03,
.flt04,
.flt05,
.flt06{
	display: -webkit-box;/* Android4.3以前ブラウザ用 */
	display: -webkit-flex;/* iOS8以前Safari用 */
	display: flex;
	-webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
	flex-wrap:wrap;
}
.flt02>li{
	margin:0 1% 10px;
	width:48%;
}
.flt03>li{
	margin:0 1% 10px;
	width:31%;
}
.flt04>li{
	margin:0 1% 10px;
	width:23%;
}
.flt05>li{
	margin:0 1% 10px;
	width:18%;
}
.flt06>li{
	margin:0 1.3% 10px;
	width:14%;
}

/* テーブルのパターン１ 
 -------------------------------------------------------------------------------------------*/
.tbl01{
	margin-bottom:20px;
	width:100%;
}
.tbl01 th,
.tbl01 td{
	padding:10px;
	border:1px solid #ccc;
	vertical-align:top;
}
.tbl01 th{
	background-color:#f0f0f0;
	width:30%;
}

/* テーブルのパターン２ 
 -------------------------------------------------------------------------------------------*/
.tbl02{
	margin-bottom:20px;
	width:100%;
}
.tbl02 th,
.tbl02 td{
	padding:10px;
	border-bottom:1px dashed #ccc;
	vertical-align:top;
}
.tbl02 th{
	width:30%;
}
.tbl02 td{
	text-align:right;
}

/* タブ切り替え 
 -------------------------------------------------------------------------------------------*/
#tabMenu li a{
	border:1px solid #ccc;
	display:block;
}
#tabMenu li a.active{
	background-color:#ccc;
}
#tabBoxes #tabBox1{
	display:block;
}
#tabBoxes .tabbox{
	display:none;
	border:1px solid #ccc;
	padding:20px;
}


/* 一行画像横タイプ ※widthは適宜変更してください
 -------------------------------------------------------------------------------------------*/

.rayout-img-left,
.rayout-img-right{
	margin-bottom:20px;
	overflow:hidden;
}
.rayout-img-left{
}
.rayout-img-left .rayout-inner-img{
	float:left;
	width:30%;
}
.rayout-img-left .rayout-inner-content{
	float:right;
	width:68%;
}

.rayout-img-right{
}
.rayout-img-right .rayout-inner-img{
	float:right;
	width:30%;
}
.rayout-img-right .rayout-inner-content{
	float:left;
	width:68%;
}

/* 問い合わせフォーム
 -------------------------------------------------------------------------------------------*/

.form-tbl{
}
.form-tbl .w90 textarea,
.form-tbl .w90 input{
	width:90%;
}
.form-tbl .w30 input,
.form-tbl .w30{
	width:30%;
}
.form-tbl .submit-button{
	margin:20px 0;
	text-align:center;
}
.form-tbl .submit-button input{
	padding:5px 20px;
	cursor:pointer;
}
.form-tbl label{
	display:inline-block;
}
/* ブログ・一覧リスト
 -------------------------------------------------------------------------------------------*/
/* カテゴリーリスト */
.cat-list{
	margin-bottom:50px;
}
.cat-list li a{
	margin:0 10px 20px 0;
	padding:10px;
	border:1px solid #ccc;
	text-decoration:none;
	background-color:#c00;
	color:#fff;
}
.cat-list li a:hover{
	background-color:#E7A500;
}
/* 一覧ブロック */

.cat-list,
#blogwrap{
	display: -webkit-box;/* Android4.3以前ブラウザ用 */
	display: -webkit-flex;/* iOS8以前Safari用 */
	display: flex;
	-webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
	flex-wrap:wrap;
}
#page-blog-list article{
	margin:0 1% 20px;
	width:23%;
	padding:10px 10px 0;
	border:1px solid #ccc;
	border-radius:5px;
}
/* 一覧タイトル */
#page-blog-list #main article h3{
	margin-bottom:5px;
	border-left:5px solid #FDBD00;
	padding:2px 0 2px 5px;
}
#page-blog-list #main article .meta{
	padding:5px 0 0;
	border-top:1px dashed #ccc;
	text-align:right;
	font-size:0.8rem;
}

.wp-pagenavi{
	margin:20px 0;
	text-align:center;
}

/* ブログ・一覧一行
 -------------------------------------------------------------------------------------------*/
/*記事ブロック*/
#page-blog-line article{
	padding:20px 0;
	border-bottom:1px solid #ccc;
	overflow:hidden;
}
#page-blog-line article .list-image{
	width:30%;
	float:left;
}
#page-blog-line article .list-content{
	width:68%;
	float:right;
}
#page-blog-line article .list-content h3{
	border-bottom:2px solid #F97400;
}
#page-blog-line article .list-content .meta{
	padding:10px 0 0;
	border-top:1px dashed #ccc;
	font-size:0.8rem;
	text-align:right;
}
/* 検索結果
 -------------------------------------------------------------------------------------------*/
/*記事ブロック*/
#page-search article{
	padding:20px 0;
	border-bottom:1px solid #ccc;
	overflow:hidden;
}
#page-search article .list-image{
	width:30%;
	float:left;
}
#page-search article .list-content{
	width:68%;
	float:right;
}
#page-search article .list-content h3{
	border-bottom:2px solid #F97400;
}
#page-search article .list-content .meta{
	padding:10px 0 0;
	border-top:1px dashed #ccc;
	font-size:0.8rem;
	text-align:right;
}
/* ブログ・詳細
 -------------------------------------------------------------------------------------------*/
#signature-block { /* ブログ署名欄 */
	clear: both;
	padding: 50px 0 20px;
}
.article .post-meta { /* 記事メタ情報 */
	text-align: right;
	font-size: 0.85em;
}
.wp_social_bookmarking_light {
	position: absolute;
	right: 0;
	bottom: 0px;
}
.article .post-content { /* 記事本文 */
	margin-bottom: 10px;
	padding-bottom: 50px;
	position: relative;
	word-wrap: break-word;
}
#single-paging{
	width:100%;
	border:none;
}

/* コメント部分 
----------------------------- */
.blog .comment-area {
	margin: 10px;
	text-align: left;
}

#com h3 {/* コメントタイトル */
	margin: 10px 0;
	padding: 5px;
}

#com .compost { /* コメント本文 */
	margin: 10px;
	padding: 10px;
	line-height: 1.5em;
}

#comment { /* テキストエリア */
	width: 60%;
	height: 80px;
}

#commentform p { margin: 10px; }

.cominfo { /* コメントメタ */
	text-align: right;
	margin-top: 30px;
	font-size: 0.85em;
}