/*
Theme Name: Nature Net
Description:
*/
@charset "utf-8";

/*


/* ---------------------------------------------------------
■ float
--------------------------------------------------------- */
.clearfix:after,
#fbwall div.fb-wall-box:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix,
#fbwall div.fb-wall-box {
  min-height: 1px;
}

.left{float: left;}
.right{float: right;}

/* ---------------------------------------------------------
■ テキストリンク
--------------------------------------------------------- */
a {font-weight: lighter;}
a:link { color: #ff1e00; text-decoration: none; }
a:visited { color: #009b3a; text-decoration: none; }
a:hover { color: #888; text-decoration: none; filter: alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;}
a:active { color: #333; text-decoration: none; }

a.no_link{
	cursor: default;
	pointer-events: none;
	}
/* ---------------------------------------------------------
■ レイアウトベース
--------------------------------------------------------- */
/*Font*/

h1,h2,h3,h4,h5,h6{line-height: 1em;} 

h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h2,h3,h4,h5 {margin-bottom: 0.5em;}
p { margin-bottom: 1em; }

ul {
	padding-left: 1.5em;
	margin-bottom: 1em;
	}
ul li{
	list-style: square;
	}

/*Font（post）*/

#post{padding:0 5% 50px;}

#post h1 { 
			font-size: 3em;
			font-weight: lighter;
			font-family: Georgia, "Times New Roman", Times, serif;
			text-align: center;
			
			width: 110%;
			margin-left: -5%;
			padding: 0.5em 0;
			
			background-image:
			url('img/top/wood.jpg');
			background-position:
			center center;
			background-repeat:
			repeat;
			box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
		}

#post h2 {
			width: 110%;
			margin-left: -5%;
			font-size: 2em;
			font-weight: lighter;
			font-family: Georgia, "Times New Roman", Times, serif;
			
			width: 104%;
			padding: 0.5em 3%;
			background: url(img/mw.gif) center center repeat;
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
		}

#post h3 {
			font-size: 1.5em;
			padding: 1px 0.5em;
			border-left: 1em solid #006840;
		}
		
#post h4 {
			font-size: 1.2em;
			color: #ff9900;
		}
#post h5 { 
			font-size: 1em;
			color: #009b3a;
		}
		
#post h6 { 
			font-size: 0.8em;
			background: #009b3a;
			padding: 0.3em;
			color: #fff;
		}


#post h2,
#post h3,
#post h4,
#post h5 {margin-bottom: 0.5em;}

p { margin-bottom: 1em; }

ul {
	padding-left: 1.5em;
	margin-bottom: 1em;
	}
ul li{
	list-style: square;
	}

/*Color*/


/*_/Font_*/

html{
	width: 100%;
	}

body {
	color: #333;
	font: 14px/1.4em 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック', Verdana, Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
	background: url(img/body.gif) center center repeat fixed;
	}

#main_wrapper{
	width: 80%;
	padding: 0 25px;
	background: url(img/mw.gif) center center repeat fixed;
	margin: 0 auto;
	position: relative;
	min-width: 460px;
	display: block;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
	}

#header{
	width: 99%;
	margin: 0 auto;
	padding-top: 90px;
	padding-bottom: 0;
	padding-right: 1%;
	position: relative;
	text-align: right;
	color: #fff;
	background-image:
		url('img/tp-header_r.gif'),
		url('img/tp-header_bg.gif');
	background-repeat: 
		no-repeat,
		repeat-x;
	background-position:
		right top,
		left top;
	background-color: #006840;
	}
	#header div.logo{
		width: 400px;
		height: 80px;
		position: absolute;
		overflow: hidden;
		text-indent: 120%;
		white-space: nowrap;
		left: 0;
		top: 0;
		background: url('img/tp-header.gif') no-repeat left top;
		}
	#header .hd_icon {
		position: absolute;
		right: 0;
		top: 30px;
		}
		#header .hd_icon a{
			width: 45px;
			height: 45px;
			overflow: hidden;
			text-indent: 120%;
			white-space: nowrap;
			font-size: 8px;
			float: left;
			}
			#header .hd_icon a.hdr_fb {
				margin-top: 4px;
				width: 45px;
				height: 45px;
				background: url('img/hdr_fb.gif') no-repeat center center;
				}
			#header .hd_icon a.hdr_twt {
				margin-top: 4px;
				width: 45px;
				height: 45px;
				background: url('img/hdr_twt.gif') no-repeat center center;
				}
			#header .hd_icon a.hdr_mf {
				margin-right: 8px;
				width: 60px;
				height: 45px;
				background: url('img/hdr_mf.gif') no-repeat center center;
				}
		#header ul#hd_nav{
			margin: 0;
			padding: 0;
			float: right;
			}		
			#header ul#hd_nav li{
				list-style: none;
				float: left;
				}
				#header ul#hd_nav li a{
					color: #fff;
					font-weight: lighter;
					padding: 0.2em 0.5em 0.5em;
					}					
					#header #hd_nav a:hover{
						color: #009b3a;
						background: #fff;
						}
		
#contents{
	width: 94%;
	margin: 0 auto;
	min-height: 50px;
	padding: 1px 3% ;
	background: url('img/content_bg.gif') repeat center center;
	overflow: hidden;
	}
	
	#btm_nav{
		font-size: 0.8em;
		line-height: 1em;
		height: 30px;
		min-width: 300px;
		margin: 0 auto;
		}
		#btm_nav a{
			padding: 0 0.5em;
			display: block;
			float: left;
			white-space: nowrap;
			border-left: 1px solid #333;
			border-right: 1px solid #333;
			}
#footer{
	width: 90%;
	margin: 0 auto;
	padding: 3em 5%;
	min-height: 50px;
	}
	#footer p.copy{
		font-size: 0.6em;
		line-height: 1.6em;
		text-align: center;
		}
		
/*NNライブラリー*/

#nn_library{
	width: 100%;
	min-height: 400px;
	display: block;
	background-image:
	url('img/top/wood.jpg');
	background-position:
	center top;
	background-repeat:
	repeat;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
	margin-top: 25px;
	padding-bottom: 25px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
#library_contents{
	margin-left: 2%;
	}
	#nn_library h2.heading{
		text-align: center;
		background-image: 
		url('img/top/nnl_heading.png'),
		url('img/top/wood_heading.jpg');
		background-position: 
		center center,
		center center;
		background-repeat:
		no-repeat,
		repeat;
		background-size:
		contain,
		auto;
		padding: 0.5em;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;
		border-bottom: 2px solid #009b3a;
		}
	div.heading_text{
		font-size: 1.2em;
		background: url('img/content_bg.gif') repeat center center;
		line-height: 1.4em;
		color: #000;
		text-align: justify;
		padding: 0.5em 2em;
		font-family: Georgia, "Times New Roman", Times, serif;
		filter: alpha(opacity=80);
		-moz-opacity:0.8;
		opacity:0.8;
		-moz-box-shadow: 0 0 3px #ffffff;
		box-shadow: 0 0 3px #ffffff;
	}
/*_/NNライブラリー_*/

#sub_contents{
	width: 100%;
	min-height: 600px;

	margin: 0 0 15px;
	padding: 0;
	display: block;
	position: relative;
	}

/*たまには、ひとコト*/
	#column {
		width: 695px;
		min-height: 600px;
		float: left;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background: #fff;
		font-size: 0.8em;
		padding-bottom: 25px;
		overflow-x: hidden;
		}
		#column h2.heading{
			height: 60px;
			margin: 0;
			padding: 0.5em;

			background-image: 
			url('img/top/column_heading.png'),
			url('img/top/wood_heading.jpg');
			background-position: 
			center center,
			center center;
			background-repeat:
			no-repeat,
			repeat;
			background-size:
			contain,
			auto;

			font-size: 1em;
			line-height: 1em;
			text-align: center;
			text-indent: 200%;
			white-space: nowrap;
			overflow: hidden;
			border-bottom: 2px solid #009b3a;
			}
			#fbwall2 {
				padding-left: 97.5px;
			}
			
			ul#right_side{
		width: 200px;
		min-height: 600px;
		float: right;
		padding: 0;
		margin: 0;
		
		}
		ul#right_side li{
			list-style: none;
			margin: 0 0 5px;
			padding: 0;
			padding-bottom: 25px;
			box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			background: #fff;
			}
			ul#right_side li p{
				padding: 10px;
				margin: 0;
				}
			ul#right_side li h2.heading{
						height: 60px;
						margin: 0;
						padding: 0.5em;
						font-size: 1em;
						line-height: 1em;
						text-align: center;
						text-indent: 200%;
						white-space: nowrap;
						overflow: hidden;
						border-bottom: 2px solid #009b3a;
						}
						#news h2.heading{
						background-image: 
						url('img/top/news_heading.png'),
						url('img/top/wood_heading.jpg');
						background-position: 
						center center,
						center center;
						background-repeat:
						no-repeat,
						repeat;
						background-size:
						contain,
						auto;
						}
						#pr h2.heading{
						background-image: 
						url('img/top/pr_heading.png'),
						url('img/top/wood_heading.jpg');
						background-position: 
						center center,
						center center;
						background-repeat:
						no-repeat,
						repeat;
						background-size:
						contain,
						auto;
						}
/*GIFT*/

a#gift_banner{
	width: 220px;
	height: 50px;
	text-indent: 150%;
	overflow: hidden;
	white-space: nowrap;
	background: url('img/header_giftbanner.png') no-repeat left top;
	position: absolute;
	top: 20px;
	left: 520px;
}

#gift_contents{
	width: 100%;
	min-height: 150px;
	margin-bottom:50px;
	
	background-image: url('img/top/wood.jpg');
	background-position: center center;
	background-repeat: repeat;
	
	border-bottom: 2px solid #009b3a;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
	#gift_contents h2.heading{
		
		
		clear: both;
		text-align: center;
		padding: 0.5em;
		position: relative;
		bottom: 0;
		margin-bottom: 0!important;
		
		background-image: 
		url('img/top/giftc_heading.png'),
		url('img/top/wood_heading.jpg');
		background-position: 
		center center,
		center center;
		background-repeat:
		no-repeat,
		repeat;
		background-size:
		contain,
		auto;
		
		box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.3);
		
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;
		}
/*_/GIFT_*/

div.item{
	width: 22%;
	min-height: 150px;
	background: #fff;
/*	background-image: 
	url('img/top/paper.jpg');
	background-position: 
	center center;
	background-repeat:
	repeat;
	background-size:
	auto;*/
	border: 3px solid #fff;
	margin: 10px 1%;
	float: left;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
	}
	div.item p{
		text-align: center;
		color: #555;
		font-size: 0.8em;
		font-weight: bold;
		line-height: 1.2em;
	}
	div.item img{
		max-width: 100%;
	}
div.carousel_box{
	width: 180px;
	min-height: 180px;
	background-color: #fff;
	margin: 10px 5px 0;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
	list-style: none;
	position: relative;top: 5em;
	float: left;
	padding-bottom: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	}
	div.carousel_box p{
		background: #fff;
		color: #ff1e00;
		font-size: 0.8em;
		font-weight: bold;
		line-height: 1.2em;
		padding: 0.6em;
		position: absolute;
		top: -4em;
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	div.item:hover,
	div.carousel_box:hover{
		filter: alpha(opacity=80);
		-moz-opacity:0.8;
		opacity:0.8;
		}
	div.carousel_box img{
		max-width: 100%;
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		}
	
	#carousel {
	  margin: -30px auto -35px;
	  width: 99%;
	  height: 270px;
	  overflow: hidden;
	}	

/*サブコンテンツ	*/
#news {
	min-height: 50px;
	margin-bottom: 25px;
	display: block;
	}
	#news p {
		margin-top: 25px!important;
		font-size: 0.8em;
		line-height: 1.2em;
		}
		#news p span.date{
			float: right;
			font-size: 0.5em;
			}
#pr dl{
	padding-top: 15px;
	}
	#pr dd{
		margin: 0 10px 15px;
		padding: 0;
		}

	#amazon_banner {
	width: 728px;
	height: 90px;
	margin: 0 auto 25px;
	overflow: hidden;	
	}
#amazon_banner iframe{
	width: 728px;
	height: 90px;
	}

#nn_library,
#sub_contents,
#gift_contents,
#amazon_banner{
	margin-bottom: 50px!important;
	}

	
/*FORM*/
/****************************************
		8.  Form
*****************************************/
input[type="text"], textarea {
	border:1px solid #ccc;
	padding: 5px;
	
	/* 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"], input[type="button"] {
	width: 200px;
	height: 70px;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	border: 4px solid #00813e;
	background: #009b3a;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}
	input.wpcf7-form-control.wpcf7-submit{float: right;clear: both;margin-bottom: 25px;
	}
	
.wpcf7-form-control.wpcf7-textarea.jInput{
	width: 100%;
	}

input[type="button"]:hover,
input[type="submit"]:hover {
	background: #006840;
	border: 6px solid #00813e;
	}
.hide {display: none !important;}
.block_list span.wpcf7-list-item { display: block; }
span.wpcf7-not-valid-tip {
	top: 20px;
	background: #ffffff;
	color: red;
	font-weight: bold;
	border: 2px solid red;
	max-width: 150px;
	padding-left: 5px;
	}
	span.wpcf7-not-valid-tip:after, span.wpcf7-not-valid-tip:before {
		bottom: 100%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		}
	span.wpcf7-not-valid-tip:after {
		border-color: rgba(255, 255, 255, 0);
		border-bottom-color: #ffffff;
		border-width: 6px;
		left: 10%;
		margin-left: -6px;
		}
	span.wpcf7-not-valid-tip:before {
		border-color: rgba(0, 0, 0, 0);
		border-bottom-color: red;
		border-width: 8px;
		left: 10%;
		margin-left: -8px;
		}

.add_button1, .add_button {
	text-align: center;
	cursor: pointer;
	margin-bottom: 10px;
	width: 580px;
	padding: 10px 5px;
	background: #009b3a;
	color: #fff;
	font-size: 120%;
	font-weight: bold;
	border: 5px solid #e8e8e8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

hr {
    border:none;
    border-top:dashed 1px #CCC;
    height:1px;
    color:#FFFFFF;
    margin: 0 6 0 6;
	}
label {cursor: pointer!important;}
.wpcf7-form p {margin-bottom: 15px;}
.wpcf7 .wpcf7-response-output {
	position: fixed;
	top: 200px;
	background: #fff;
	z-index: 100;
	padding: 30px;
	width: 520px;
	text-align: center;
	}
#wrapper.noscript .wpcf7 .wpcf7-response-output {
	top: -28px;
	padding: 1px;
	}
#wrapper.noscript .wpcf7 .wpcf7-response-output:hover {display: none;}
.wpcf7 .wpcf7-validation-errors {border: 3px solid red;}
.wpcf7 .wpcf7-mail-sent-ok {
	top: 200px;
	color: #fff;
	font-size: 120%;
	font-weight: 600;
	background: #009b3a;
    border: 3px solid #e8e8e8;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

a.close_button {
	background: url('../img/close_button.png') no-repeat center top;
	line-height: 110%;
	font-size: 12px;
	float: right;
	padding-top: 35px;
	margin-right: 5px;
	text-align: center;
	}
	a.close_button:hover {
		opacity: 0.9;
		filter: alpha(opacity=-90);        /* ie lt 8 */
		-ms-filter: "alpha(opacity=90)";  /* ie 8 */
		-moz-opacity:0.9;                 /* FF lt 1.5, Netscape */
		-khtml-opacity: 0.9;              /* Safari 1.x */
		}

.jInput {
        padding: 4px 2px 2px !important;
        border: 1px solid #A7A6AA;
        }
.jFocus {
        outline: medium none !important;
        background-color: #f7fdff !important;
        border-color: #6ddeff !important;
        font-size: 150%;
        box-shadow: 0 0 8px rgba(82, 168, 236, 0.3);
        -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.77);
        -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.77);
        -ms-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        -o-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        border-color: rgba(82, 168, 236, 0.75) !important;
        }
 .jFocus [placeholder] {display: none;}
.text_right {text-align: right;}

/* ---------------------------------------------------------
■ NNL Gallery
--------------------------------------------------------- */

#nnl_gallery{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#nnl_gallery .nnl_thm{
	width: 24%;
	height: 24%;
	margin: 0 0.5% 5px;
	padding: 0;
	float: left;
	display: block;
	overflow: hidden;
}
#nnl_gallery .nnl_thm img{
	width: 100%;
	height: 100%;
}



/* ---------------------------------------------------------
■ レスポンシブ
--------------------------------------------------------- */

/*===============================================
●pc.css 画面の横幅が960px以上
===============================================*/
@media screen and (min-width: 960px){

	#main_wrapper{
		width: 960px;
		height: auto;
		}
}

/*===============================================
●tablet.css 画面の横幅が959pxまで
===============================================*/
@media screen and (max-width: 959px){
	#main_wrapper{
		width: 720px;
		height: auto;
		}
	#column{
		width: 470px;
		}
	#amazon_banner {
		margin-left: -25px;
		}
	a#gift_banner{
		top: 55px;
		left: 250px;
	}	
	div.item{
		width: 29.7%;
		}
	#fbwall2 {
		padding-left:0px;
	}
}
/*===============================================
●smart.css  画面の横幅が660pxまで
===============================================*/
@media screen and (max-width:660px){
	#main_wrapper{
		width: 640px;
		padding: 0;
		margin-top: 25px;
		}
	#column{
		width: 400px;
		}
	a#gift_banner{
		top: 82px;
		left: 20px;
	}
	#fbwall2 {
		padding-left:0px;
	}
	
}

/* ---------------------------------------------------------
■ To top
--------------------------------------------------------- */
.pagetop {
	position: fixed;
	bottom: 30px;
	right: 55px;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #00813E;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.pagetop.show {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}