@charset "utf-8";
/*
Theme Name: Hair Salon
Theme URI: http://www.example.com/
Author: Cat Speak
Author URI: http://cat-speak.net/
Description: サンプルテーマです。
Version: 1.0
*/

@import url(http://fonts.googleapis.com/css?family=Sofia);


body {
	background: #FFF;
	color: #000;
	font: sans-serif;
	margin: 0;
}

/*リンク*/
a,
a:link {
	color:#097d00;;
	text-decoration:underline;
}
a:hover,
a:active {
	color:#12be05;
}

#page {
	border-top:3px solid #000;
	position: relative;
}


/* -------------------------------------
ヘッダー
-------------------------------------  */
#page-header {
	border-bottom:1px solid #000;
	margin: 0 0 1em;
}

/*
サイト名
*/
#site-title {
	font-size: 1.25em;
	font-family: 'Sofia', cursive;
	line-height: 1.3;
	margin: 5px;
	text-align: center;
}
#site-title a {
	color: #000;
	text-decoration: none;
}


/*
グローバルナビ：wp-list-pagesで表示
*/
#nav-global {
	border-top: 1px solid #000;
}
#nav-global ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
#nav-global ul li {
	display: inline-block;
	padding: 3px;
}
#nav-global ul li a {
	color: #000;
	display: inline-block;
	font-family: Times, serif;
	font-size: 1em;
	line-height: 1.25;
	padding: 5px;
	text-decoration: none;
}

/*
wp-list-pagesで自動出力されるクラス
現在選択されているページの時 current_page_item
現在選択されているページの親ページの時 current_page_parent
現在選択されているページの最上位ページの時 current_page_ancestor
を利用して選択状態にする
*/
#nav-global ul li a:hover,
#nav-global ul li.current_page_item a,
#nav-global ul li.current_page_parent a,
#nav-global ul li.current_page_ancestor {
	background-color: #EEE;
}

/* -------------------------------------
フッター
-------------------------------------  */
#page-footer {
	border-top: 1px solid #000;
}
#page-footer p {
	font-family: serif;
	font-size: 0.75em;
	line-height: 1.5;
	margin: 0.5em auto;
	width: 96%;
}


/* -------------------------------------
ボディ
-------------------------------------  */
#page-body {
	margin: 0 auto;
	overflow: hidden;
	width: 96%;
}

/* ページの先頭へ */
.pagetop {
	clear: both;
	margin: 0.5em;
	text-align: right;
}
.pagetop a {
	font-size: 0.875em;
	line-height: 1.429;
	position: relative;
}
.pagetop a:before {
	border-top: 7px solid transparent;
	border-bottom: 7px solid #000;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	content: "";
	position: absolute;
	left: -15px;
	top: -2px;
}

/* パンくずリスト */
.topicpath {
	font-size: 0.75em;
	line-height: 1.5;
	margin: 1em 0;
}
.topicpath a,
.topicpath a:link {
	color: #000;
	text-decoration: underline;
}
.topicpath a:hover,
.topicpath a:active {
	color: #666;
}

/* -------------------------------------
メインカラム
-------------------------------------  */
#main {
	margin: 0 0 1em;
	overflow: hidden;
}

/* -------------------------------------
サイドバー
-------------------------------------  */
#side {
	/*margin: 0 0 1em;*/
}


/*
サブナビ
*/
#nav-sub h2 {
	font-family: serif;
	font-size: 1em;
	font-weight:normal;
	margin: 0 0 2px;
        background-color:silver;
	text-align: center;
}
#nav-sub h2 a {
	color: #FFF;
	display: block;
	/*padding: 5px 10px;*/
	text-decoration: none;
}
#nav-sub h2 a:hover,
#nav-sub h2 a:active {
	opacity: 0.8;
}

/*
wp-list-pagesで表示
*/
#nav-sub ul {
	margin: 0;
	padding: 0;
}
#nav-sub ul li {
	font-size: 1em;
	/*font-size: 0.875em;*/
	line-height: 1.429;
	list-style: none;
}
#nav-sub ul li a {
	background: #EEE;
	color: #000;
	display: inline-block;
	width: 100%;
	margin: 0 0 2px;
	padding: 5px 10px 5px 22px;
	position: relative;
	text-decoration: none;
}
#nav-sub ul li a:before {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #000;
	border-right: 7px solid transparent;
	content: "";
	left: 10px;
	position: absolute;
	top: 10px;
}

#nav-sub ul li a:hover,
#nav-sub ul li a:active {
	background:#666;
	color:#FFF;
}
#nav-sub ul li a:hover:before {
	border-left: 7px solid #FFF;
}

/*
wp-list-pagesで現在選択されているページの時
自動出力されるクラス current_page_item
を利用して選択状態にする
*/
#nav-sub ul li.current_page_item a {
	background:#666;
	color:#FFF;
}
#nav-sub ul li.current_page_item a:before {
	border-left: 7px solid #FFF;
}


/* -------------------------------------
ページ送り
-------------------------------------  */
/*navPage*/
.nav-pagelink {
	margin: 1.5em 0;
	overflow: hidden;
}
.nav-pagelink .prev {
	float:left;
	width:49%;
}
.nav-pagelink .next {
	float:right;
	width:49%;
}
.nav-pagelink a {
	background: #EEE;
	color:#000;
	display:block;
	font-size: 0.875em;
	line-height: 1.429;
	padding: 10px 20px;
	position: relative;
	text-decoration:none;
}
.nav-pagelink .next a {
	text-align:right;
}
.nav-pagelink .next a:before {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #000;
	border-right: 7px solid transparent;
	content: "";
	position: absolute;
	right: 0;
	top: 15px;
}
.nav-pagelink .prev a:before {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid transparent;
	border-right: 7px solid #000;
	content: "";
	left: 0;
	position: absolute;
	top: 15px;
}

.nav-pagelink a:hover,
.nav-pagelink a:active {
	background:#666;
	color:#FFF;
}
.nav-pagelink .next a:hover:before {
	border-left: 7px solid #FFF;
}
.nav-pagelink .prev a:hover:before {
	border-right: 7px solid #FFF;
}




/* -------------------------------------
News：メインページ、アーカイブページ
-------------------------------------  */
.article-archive {
	border-bottom: 1px dotted #000;
	margin: 1.5em 0;
	overflow: hidden;
	padding: 0 0 1em;
}
.article-archive h2 {
	font-size:1em;
	line-height: 1.375;
	margin: 0.25em 0;
}
.article-archive p {
	font-size: 0.875em;
	line-height: 1.429;
	margin: 0.5em 0;
}


/* -------------------------------------
親ページ
-------------------------------------  */
.article-childpage {
	border:1px solid #999;
	margin:1em 0;
}
.article-childpage a {
	color: inherit;
	display: block;
	padding:10px;
	text-decoration: none;
}
.article-childpage a:hover,
.article-childpage a:active {
	background: #EEE;
}
/*
アイキャッチ画像には、クラス wp-post-image が入る
*/
.article-childpage img.wp-post-image {
	display: block;
	margin: 0 auto;
}
.article-childpage h2 {
	border-bottom: 1px solid #999;
	font-size: 1em;
	margin: 0 0 0.5em 0;
	padding: 5px 0;
}
.article-childpage p {
	margin: 0;
}


/* -------------------------------------
ページタイトル
-------------------------------------  */
h1.page-title {
	border-bottom: 1px solid #000;
	font-size: 1.25em;
	line-height: 1.3;
	margin: 1em 0;
	padding: 5px 0;
}
/*シングルページのみ*/
.article-single h1.page-title {
	margin: 1em 0 0.25em;
}


/* -------------------------------------
文字の装飾
-------------------------------------  */
.public-date {
	display: block;
	font-family: serif;
	font-size: 0.75em;
	line-height: 1.5;
	margin: 0.25em 0;
}
.more {
	margin: 0;
	text-align: right;
}
.more a {
	position: relative;
}
.more a:before {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #000;
	border-right: 7px solid transparent;
	content: "";
	left: -12px;
	position: absolute;
	top: 2px;
}


/* -------------------------------------
記事の内容
-------------------------------------  */
.content {
	border-bottom: 1px dotted #000;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
/*フロントページ用*/
body.home .content {
	border-bottom: none;
	margin: 0;
	padding: 0;
}

/*
記事本文エリアのフォーマット
editor-style.cssとあわせる部分
*/
.content {
	font-size: 0.875em;
	line-height: 1.429;
}
.content ul {
	list-style: square;
}
.content strong {
	color: #1d6469;
}
.content h2 {
	background: url(images/bg_02.png);
	font-size: 1.25em;
	line-height: 1.3;
	padding: 5px 10px;
}
.content h3 {
	border-bottom:1px solid #CCC;
	font-size: 1.125em;
	line-height: 1.333;
	padding: 5px 10px;
}
.content h4 {
	border-left: 5px solid #CCC;
	font-size: 1em;
	line-height: 1.375;
	padding: 3px 8px;
}
.content h5 {
	font-size: 1em;
	line-height: 1.375;
	padding: 0;
}
.content h5:before {
	color: #CCC;
	content: "●";
}

/* Tables */
.content table caption {
	font-weight:bold;
	text-align:left;
}
.content table {
	border: 1px solid #DDD;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1em 0;
	text-align: left;
	width: 100%;
}
.content tr th {
	border: 1px solid #DDD;
	background-color:#EEE;
	font-weight:bold;
	padding:5px;
}
.content td {
	border: 1px solid #DDD;
	padding:5px;
}


/*
Alignment
画像の配置CSSをWordPressの指定と合わせる
*/
.alignleft {
	float: left;
	margin-right: 1.5em;
}
.alignright {
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	display: block;
	margin: 0 auto;
}
img[class*="align"] {
	height: auto;
}
img.size-full,
img.size-large {
	height: auto;
	max-width: 100%;
	width: auto;
}


/*
Caption
キャプション付き画像のCSSをWordPressの指定と合わせる
*/
.wp-caption {
	background-color: #EEE;
	margin-bottom: 1.5em;
	max-width: 100%;
	text-align: center;
	padding: 5px 0;
}
.wp-caption img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 96%;
}
.wp-caption .wp-caption-text {
	font-size: 0.75em;
	line-height: 1.5;
	margin:0;
	padding: 5px;
}





/* -------------------------------------
フロントページ
-------------------------------------  */
/*メインイメージ*/
.top-mainimage img {
	height: auto;
	width: 100%;
}

/*コンテンツエリア*/
.top-contents {
	margin: 1em 0;
}

/*topNews*/
.top-news {
	margin: 1em 0;
}
.top-news a,
.top-news a:link {
	color:#000;
	text-decoration: none;
}
.top-news a:hover,
.top-news a:active {
	color:#666;
	text-decoration:underline;
}

.top-news .top-news-head {
	border-bottom:1px solid #000;
	overflow:hidden;
	position: relative;
}
.top-news .top-news-head h2 {
	font-family: serif;
	font-size: 1em;
	line-height: 1.375;
	margin: 0;
	padding: 5px 0;
}
.top-news .top-news-head p.view-all {
	font-family: serif;
	font-size: 0.875em;
	line-height: 1.429;
	margin: 0;
	position: absolute;
	right: 0;
	top: 8px;
}
.top-news .top-news-head p.view-all a {
	position: relative;
}
.top-news .top-news-head p.view-all a:before {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #000;
	border-right: 7px solid transparent;
	content: "";
	left: -12px;
	position: absolute;
	top: 3px;
}

.top-news ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.top-news ul li {
	border-bottom:1px dotted #000;
	font-size: 0.875em;
	line-height: 1.429;
	padding:10px 5px;
}
.top-news ul li .date {
	display: block;
}

/*top-banner*/
.top-banner {
	margin: 1em 0;
    //background-color: ivory;
}
.top-banner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.top-banner ul li {
	margin: 0.5em 0;
}
.top-banner ul li a img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}
.top-banner ul li a:hover img {
	opacity: 0.8;
}


/* =====================================
568px以上
=====================================  */
@media screen and (min-width: 568px) {
	/* -------------------------------------
	ヘッダー：文字を大きく
	-------------------------------------  */
	/*サイト名*/
	#site-title {
		font-size: 2em;
		line-height: 1.188;
		margin: 10px;
	}
	#nav-global ul li a {
		font-size: 1.125em;
		line-height: 1.333;
		padding: 5px 15px;
	}

	/* -------------------------------------
	親ページ：アイキャッチ画像を左寄せにする
	-------------------------------------  */
	.article-childpage a {
		overflow: hidden;
	}
	/*
	アイキャッチ画像には、クラス wp-post-image が入る
	*/
	.article-childpage img.wp-post-image {
		float: left;
		margin: 0 20px 0 0;
	}
	.article-childpage h2 {
		border-bottom: 1px solid #999;
		font-size: 1em;
		padding: 5px 0;
		overflow: hidden;
	}
	.article-childpage p {
		margin: 0;
		overflow: hidden;
	}


	/* -------------------------------------
	フロントページ：バナーを横並びに
	-------------------------------------  */
	/*top-banner*/
	.top-banner ul li {
		float: left;
		width: 49%;
	}
	.top-banner ul li:nth-child(odd) {
		margin: 0.5em 2% 0.5em 0;
	}
	.top-banner ul li:nth-child(even) {
		margin: 0.5em 0;
	}

}

/* =====================================
769px以上から2カラムレイアウト
=====================================  */
@media screen and (min-width: 769px) {
	/* -------------------------------------
	メインカラム
	-------------------------------------  */
	#main {
		float: right;
		width:75%;
	}

	/* -------------------------------------
	サイドバー
	-------------------------------------  */
	#side {
		float: right;
	}

	/*
	サブナビ
	*/
	#nav-sub h2 {
		font-size: 1.25em;
	}
	#nav-sub h2 a {
		padding: 15px 20px 60px;
	}


	/* -------------------------------------
	フロントページ：2カラムレイアウトに
	-------------------------------------  */
	/*コンテンツエリア*/
	.top-contents {
		float: left;
		/*width: 65.63%;*/
		width: 73%;
	}
	/*top-banner*/
	.top-banner {
		float: right;
		/*width: 31.25%;*/
		width: 25%;
	}

	/*top-banner*/
	.top-banner ul li {
		float: none;
		margin: 0;
		width: 100%;
	}

	/*-----------------------------------------------------
	contact ,error404,dberror
	page-contact.php、404.php、db-error.phpは、
	サイドバーなしのため#mainをセンター寄せする
	-----------------------------------------------------*/
	body.contact #main,
	body.error404 #main,
	body.dberror #main {
		margin:0 auto;
		float:none;
	}

}

/* =====================================
961px以上
=====================================  */
@media screen and (min-width: 961px) {

	/*固定レイアウト*/
	#page {
		margin: 0 auto;
		width: 960px;
	}

	/* -------------------------------------
	フッター：左右の余白をとらない
	-------------------------------------  */
	#page-footer p {
		width: 100%;
	}

	/* -------------------------------------
	ボディ：左右の余白をとらない
	-------------------------------------  */
	#page-body {
		width: 100%;
	}


}