@charset "UTF-8";
@import url("./plugin/plugin.css");

/*
Theme Name: Basic Nonokusa Template
Author: Luto
Author URI:
Description: WEBデザイナーるとによる、シンプルに洗練されたnonokusa専用テンプレート。
*/

/*	CSS Reset, do not edit this 
___________________________________________________________________ */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section 
{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;vertical-align:baseline;}

article, aside, dialog, figure, footer, header, hgroup, nav, section 
{display:block;}
body {line-height:1.6;}

table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}:focus {outline:0;}
.border {border:1px solid #ccc;}

/* 目次 ---------------------
 *  1. 基本のリンクカラー
 *  2. コンテナの配置、全体の構成
 *  3. ヘッダーの設定
 *  4. 記事エリアの設定 
 *  5. コメントの設定
 *  6. サイドバーの設定
 *  7. 入力フォームの設定
 *  8. ページナビの設定
 */



/* 1. 基本のリンクカラー
-------------------------------------------------------------- */
#side a {color: #777; text-decoration:none;}
a:hover {color: #aaa!important;}
* {	box-sizing: border-box; }
#side_menu_window { background:rgba(255,255,255,0.9); }

/* 2. コンテナの配置、全体の構成
-------------------------------------------------------------- */
body { background-color: #ffffff; padding:0; width:100%; } /*#efe*/

div#wrapper {width:100%; margin:0 auto; border:#999 solid 1px;
	-webkit-box-shadow: rgba(200, 200, 200, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(200, 200, 200, 0.4) 0px 1px 2px;
	box-shadow: rgba(200, 200, 200, 0.4) 0px 1px 2px;
	}
main { float:left; width: 70%; margin: 0 2% 0 2%; padding:0; display:inline-block;}
div#side { float:left; margin:100px 2% 30px 0; width: 24%; display:inline-block;}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
footer { min-height:100px; clear: both;}
address {width:auto;  padding:35px 0; text-align:center;
	font-size:80%; }
.content {
	/*width: 780px;*/
    width:100%;
	margin: 0 auto;
	padding: 80px 15px;
}

#site-title a {
	text-align: left;
	padding-left:10px;
    min-width:360px;
	min-height: 50px;
	margin:0 auto 4px;
	font-weight:bold;
    text-indent:-9999px;
	color:#333;
	text-decoration:none;
    display:inline-block;
    content:"";
    border-radius:0 32px 32px 0;
    background:#fff url(./img/title.jpg) no-repeat 10% 50%;
    background-size:75% auto;
}

@media screen and (max-width: 690px),(max-device-width: 690px) { 
main { float: none; margin: 0 0; padding:0 1% 90px; width:98%!important; } 
div#side { float: none; margin: 30px 7.5% 50px; width:85%; font-size:110%;}

#site-title a {
	min-height: 40px;
    background-size:60% auto;
}
.breadcrumb { width:100%; padding:8px 10px; }

.post {padding:10px 0!important;}
div#nav-below {
	border-bottom: 1px solid #ddd;
	margin-bottom: 1.625em;}
}

/* 3. ヘッダーの設定
-------------------------------------------------------------- */

.breadcrumb:before {
    display:block;
    content:"";
    height:10px;
    z-index:0;
}
.breadcrumb { background:url(./img/border.gif) repeat-x 0 0;
 text-align:right; margin:10px 0 0; padding:8px 15px 8px 10px; font-size:80%;}
.breadcrumb li {display:inline-block; padding-left:4px;}
.breadcrumb a { color:#777; } 

/* 4. 記事エリアの設定
-------------------------------------------------------------- */
#entry_navi {margin:10px 0 20px; font-size:90%;}

/*** Blog info ***/
ul.blog_info{
	color: #555;
	font-size:85%;
	padding:0;
    margin:4px 0 20px 0!important;
    opacity: 0.8;
}
ul.blog_info a { color:#555; }
ul.blog_info li{
			display:inline-block;
			padding-left:0px!important;
			margin:0 0 12px 12px!important;
			list-style: none !important;
			}
/*	ul.blog_info li.cal{background: url(./images/icon_cal.png) no-repeat 0 50%;}
	ul.blog_info li.cat{background: url(./images/icon_cat.png) no-repeat 0 50%;}
	ul.blog_info li.tag{background: url(./images/icon_tag.png) no-repeat 0 50%;}
	ul.blog_info li.com{background: url(./images/icon_com.png) no-repeat 0 50%;}
*/	
/*** Contents ***/
img.attachment-post-thumbnail{float: left; margin:0 15px 0 0 !important;}

/*** Bottom Navigation, Comment Navigation ***/
div.nav-below{margin:40px 0 50px;}
div.nav-below a, a.more-link { font-weight:bold; text-decoration:none; padding:4px 15px;
    text-align:center;
	line-height:20px;
	color:#fff;
	display:block;
	width:135px;
	border-radius:5px;
	border:4px double #555;
	background:#555;
	}
div.nav-below a:hover, a.more-link:hover {
	cursor:pointer;
	background:#ccc;
	}
a.more-link {margin:10px 10px 10px auto;}
.nav-previous a {float:left; }
.nav-next a { float:right; text-align:right;}

	
/*** Contents ***/
.post h2 {
  position: relative;
  color: #333;
  text-align:left;
  font-size: 18px;
  line-height: 25px;
  width:90%;
  padding:10px 0 10px 10px;
}
.post h2 a { color: #555; }
.post {	margin:44px auto; padding:15px 10px 60px; color:#111; line-height:24px; font-size: 15px;
background:url(./img/border.gif) repeat-x 0 100%;
/*
"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Helvetica,Arial,Sans-Serif;
*/
}
.post p, .post div {margin-bottom:20px; padding:0 10px; line-height:24px; font-size:90%; display: block; }
.post br {display: block; content:""; line-height:24px;}
.post em{font-style: italic;}
.post code{color: #06c; font-family:'Courier New',Courier,monospace;}
.post img {max-width:100%; margin:10px 0;}
.post img.sample {
	border:1px #ccc solid;
	padding: 3px;
	background: #fff;
	margin:10px 0;
	}
	.post img.wp-smiley{border:none;padding:0;background:none;margin:0;}
.post blockquote{
	border-left:5px solid #ddd;
	background: #eee;
	padding: 10px;
	margin:20px 0;
	font-style:italic;
	}
	.post blockquote p{margin:0;}
.post div.wp-caption{margin: 20px 0;}
	.post div.wp-caption img{ margin: 0;}
	.post div.wp-caption p{ font-size:85%;}
.post ul, .post ol{margin:30px 0;}
	.post ul li{
		list-style: url(./images/arrow_list.png);
		margin-left:30px;
		}
	.post ol li{list-style: decimal outside;margin-left:20px;}

#totop {text-align:center; margin:30px auto;}




/* 5. コメントの設定
-------------------------------------------------------------- */
.commentlist h3{
	padding: 10px 0 10px 10px;
	margin-top:40px;
	border-top:1px solid #ddd;
	}
	
.commentlist{margin-bottom:30px;  width:90%;}
	.commentlist li {
		border-top:1px solid #ddd;
		padding:15px 0 0 55px;
		position:relative;
		}
	.commentlist .avatar {
		background:#fff;
		border:1px solid #ddd;
		left:0;
		margin:0 16px 0 0;
		padding:3px;
		position:absolute;
		top:15px;
		}
	.commentlist .comment-meta{margin-bottom:10px;}
		.commentlist .comment-meta a{
			color: #999;
			font-size:85%;
			text-decoration:none;
			}
			.commentlist .comment-meta a:hover{color: #ccc;}
	.commentlist p{margin-bottom:15px;}
	.commentlist .reply a{
		position: absolute;
		top: 15px;
		right: 0;
		padding: 2px 10px;
		background: #ddd;
		font-size: 85%;
		color: #333;
		text-decoration: none;
		}
		.commentligst .reply a:hover {color: #999}
		
/*** Comment form ***/
#respond{margin-top:70px;}
#respond h3{
	border-bottom:1px solid #ddd;
	padding:10px 0 10px 10px;
    max-width:90%;
	}
#respond p {margin-bottom:10px;}

#commentform{margin-top:10px;}
	#commentform label{margin: 10px 5px;font-size:85%;}
	*:first-child+html #commentform label{ position:relative\9; top: -15px\9; } /* IE7 */
	#commentform input[type="text"]{
		margin: 0px;
		}
    #commentform textarea{
		margin: 0px;
        max-width:100%;
		}
		#commentform input[type="text"]:focus, #commentform textarea:focus{
			border:1px solid #06c;
			}
input#submit { padding:10px; margin-top:8px;}

/* 6.  ウィジェットエリアの設定
-------------------------------------------------------------- */
div#side:after {
    display:block;
    content:"";
    width:100%;
    height:60px;
    clear:both;
    background:url(./img/head_back.gif) no-repeat 50% 50%;
}

.widget-area, .widget-area1 {
margin-bottom:30px;
padding:10px 0;
position:relative;
color:#333;
}

.widget-area p, .widget-area1 p {
padding-left:22px;
font-size:90%;
}

.widget-area h2 {
	margin:0 auto 10px;
	border-radius:100px;
	padding:5px 0 5px;
	line-height:28px;
	font-size:90%;
	text-align:center;
	text-shadow:3px 3px 6px #000;
	background:#555;
	background-size:auto 100%;
	color:#fff;
	}
/*
.widget-area:before {
    display:block;
    content:"";
    width:100%;
    height:47px;
    background:url(./img/border.gif) no-repeat;
  position: absolute;
  top: 39px;
  left: 4px;
    z-index:0;
}

.widget-area1:before {
    display:block;
    content:"";
    width:100%;
    height:47px;
    background:url(./img/border.gif) no-repeat;
  position: absolute;
  top: 39px;
  left: 4px;
    z-index:0;
}
*/

.widget-area h3, .widget-area1 h3 {
    font-size:105%;
    padding-left:0px;
    text-align:left;
    display:block;
    width:100%;
/*    height:47px;*/
    position: relative;
    z-index:0;
    margin-bottom:18px;
}
/*
.widget-area h3#address {
    background:url(./img/side_address.gif) no-repeat 10px 0px;
}
.widget-area h3#archives {
    background:url(./img/side_archives.gif) no-repeat 10px 0px;
}
.widget-area h3#category {
    background:url(./img/side_category.gif) no-repeat 10px 0px;
}
.widget-area h3#comments {
    background:url(./img/side_comments.gif) no-repeat 10px 0px;
}
.widget-area h3#link {
    background:url(./img/side_link.gif) no-repeat 10px 0px;
}
.widget-area h3#news {
    background:url(./img/side_news.gif) no-repeat 10px 0px;
}
*/

.widget-area ul li {
text-align:left;
padding-left:20px;
margin:4px 0;
padding:4px 0;
list-style-type:none;
font-size:90%;
}

/*** Calendar ***/
#wp-calendar {width: 100%;}
	#wp-calendar caption {
		color: #222;
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 4px;
		text-align: left;
		}
	#wp-calendar thead {font-size: 11px;}
	#wp-calendar tbody {color: #aaa;}
		#wp-calendar tbody td {
			background: #f5f5f5;
			padding: 3px 0 2px;
			text-align: center;
			}
		#wp-calendar tbody .pad {background: none;}
	#wp-calendar tfoot #next {text-align: right;}



/***アーカイブ***/
ul.accordion input { display:none;}
ul.accordion ul{ /* アコーディオン部 */
  margin: 5px 0 15px 15px;
}
ul.accordion input ~ ul{ /* アコーディオン非表示 */
  display: none;
}
ul.accordion input:checked ~ ul{ /* アコーディオン表示 */
  display: block;
}

ul.accordion li{ /* リセット */
  list-style: none;
  background: none;
  padding: 2px;
}

ul.accordion li input ~ label{ font-size:120%; }

ul.accordion li input ~ label span{ /* アイコン背景 */
  display: inline-block;
  width: 19px;
  height: 19px;
  position: relative;
  background: #aaa;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -2px;
}
ul.accordion li input ~ label span:before{ /* アイコン横棒 */
  content:'';
  height: 1px;
  width: 11px;
  display: block;
  background: #fff;
  position: absolute;
  top: 9px;
  left: 4px;
}
ul.accordion li input ~ label span:after{ /* アイコン縦棒（閉じてるとき） */
  content: '';
  height: 11px;
  width: 1px;
  display: block;
  background: #fff;
  position: absolute;
  top: 4px;
  left: 9px;
}
ul.accordion li input:checked ~ label span:after{ /* アイコン縦棒なし（開いてるとき） */
  height: 0;
  width: 0;
}
ul.accordion ul li{ /* アーカイブリスト */
  margin-left: 15px;
  position: relative;
}
/*
ul.accordion ul li::after{ /* アーカイブリストマーク 
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
*/


/* 7.  入力フォームの設定
-------------------------------------------------------------- */
input[type="text"], textarea{
	border:1px solid #ccc;
	padding: 5px;
	color: #666;
	
	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);
	
	/* FF */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);
		
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
	}
	
input[type="submit"]{
	border:1px solid #ccc;
	padding: 4px 10px;
	color: #666;
	cursor: pointer;

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#ccc)
		);
	
	/* FF */
	background: -moz-linear-gradient(
		top,
		#eee,
		#ccc
		);
		
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeeeeee,endColorstr=#ffcccccc);
	zoom: 1;
	}



/* 8.  ページナビの設定
-------------------------------------------------------------- */
.pagenavi{
	margin:10px auto 50px;
	display:block;
/*	clear:both; */
	font-size:11px;
	max-width:100%;
}
.pagenavi a ,.pagenavi span {
		color:#707070;
		background:#fff;
		border-radius:3px;	
		border:solid 1px #ddd;
		line-height:30px;
		padding:6px 9px;
		margin-right:3px;
		text-decoration:none;
}
.pagenavi a:hover , .pagenavi .current{
		border-color:#202020;
		background:#525252;
		color:#fff;
		background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
		background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}






/*???*/
ul#imgmenu li { width:93%; padding-left:7%;}
ul#imgmenu li a {
width: 93%;
height:66px;
padding:7px 0 0 7%!important;
display: block;
border:3px ridge #ccc;
border-radius:8px;
box-shadow:3px 3px 5px #aa3;
font-family:serif!important; 
font-size:17px;
line-height: 1.5!important;
font-weight:bold;
color:#444;
text-shadow:3px 3px 5px #6af;
box-sizing:border-box; -moz-box-sizing:border-box;
background-color:rgba(255,255,255,1.0)!important;
}

ul#imgmenu li a span, ul#mainmenu li a span {
font-size:12px;
color:#000;
text-shadow:0px 0px 10px #fff;
}
ul#imgmenu li a:hover, ul#topmenu li a.current {color:#777; background-color:rgba(255,255,255,1.0)!important; }
ul#imgmenu li a:hover span, ul#topmenu li a.current span {color:#999;}

a.menu1 {background:url(./images/menu.png) 80px 100% no-repeat!important;}

table.product {font-size:12px;}
table.product th {font-weight:bold; font-size:11px; background:#888; color:#300;}
.items {text-align:center;}

a.official {
	border: 1px solid #888;
	background:#999;
	color: #fff;
	border-radius:16px;
	width:300px; max-width:100%;
	margin:0 auto 30px;
	line-height:40px;
	font-size:22px;
	text-align:center;
	display:block;
	font-weight:bold;
	text-decoration:none;
	}
a.official:hover {	background:#ccc; color:#333;}