@charset "utf-8";
/* CSS Document */
html,body{margin:0;padding:0;}

body {
	-webkit-text-size-adjust: 100%;
}
p {
	color: #4d4d4d;
	letter-spacing: 0.1em;
	font-size: 14px;
}
img {
	max-width: 100%;
}
a {
	text-decoration: none;
	color:#6C9;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
}
.clear_fix {
	clear: both;
}
header {
	margin-top: 1%;
}
.wrap {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
.text_box {
	line-height: 150%;
}
.text_box p {
	color: #4d4d4d;
	letter-spacing: 0.1em;
	font-size: 14px;
}
.header logo {
	width: auto;
	text-align: left;
	margin: 1%;
}
.header nav ul {
	text-align: right;
	margin: 1% 1% 1% 0;
}
.header nav li {
	display: inline;
	text-decoration: none;
	border-left: 1px solid #CCC;
	padding: 0 1em;
	color: #4d4d4d;
	letter-spacing: 0.1em;
	font-size: 14px;
}
.img_first {
	margin: 0px auto;
}
#container_first {
	max-width: 100%;
	height: auto;
	text-align: center;
	padding: 2% 0;
}
.button {
	width: 24em;
	margin: 0 auto;
	background-color: #94ccaa;
	color: #fff;
	padding: 1em;
	font-weight: bold;
	letter-spacing: 0.2em;
}
.button:hover {
	background-color: #ffffff;
	border: 3px solid #94ccaa;
	color: #94ccaa;
	padding: 1em;
	font-weight: bold;
	letter-spacing: 0.2em;
}
/*======================== ▼ index/コンセプトメッセージ ======================================================*/

#container_concept {
	text-align: center;
}
#concept1 {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 48px;
	letter-spacing: 0.2em;
	font-weight: 300;
	margin: 1em 0 0.5em 0;
	line-height: 1.5em;
	color: #5B5B5B;
}
#concept2 {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 22px;
	letter-spacing: 0.3em;
	line-height: 1.5em;
	font-weight: 100;
	margin-bottom: 1.5em;
	color: #6D6D6D;
}
/*======================== ▼ index/NEWS ==========================================================================*/


.news {
	width: 80%;
	margin: 0 auto;
}
#news_ttl {
	font-size: 2em;
	color: #514843;
	letter-spacing: 0.2em;
	text-align: center;
}
.newsbox dl {
	width: auto;
	height: auto;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 1em;
	margin: 10px 0 30px 0;
}
 .newsbox::-webkit-scrollbar {
 display: none;
}
.newsbox dt {
	padding: 1em 0 1em 1em;
	margin-right: 2em;
	float : left;
	clear : both;
	color: #666;
}
.newsbox dd {
	padding: 1em 0 1em 1em;
	text-align: left;
	letter-spacing: 0.2em;
	color: #4d4d4d;
}

.topbana ul{
	width:100%;
	margin:0 auto;
}

.topbana li{
	display:inline-block;
	margin:0 1em;	
}


/*======================== ▼ about/しぜんのめぐみすいについて ======================================================*/


.aboutttl {
	font-size: 36px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color: #333;
	padding: 1em 0;
	text-align: center;
}

.aboutfirst {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 3em;
}
.about_img {
	text-align: center;
}
.about_txt {
	text-align: center;
	padding: 1em;
}
.about_txt p {
	text-height: 120%;
	letter-spacing: 0.2em;
}
.aboutttlkankyou {
	font-size: 36px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color: #333;
	padding: 1em 0;
	text-align: center;
	color: #4d4d4d;
}
.kodawari {
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #D9EAD8;
	padding-bottom: 5em;
}
.kodawari_txt {
	text-align: center;
	padding: 1em;
}
.kodawari_txt p {
	line-height: 160%;
}
.kodawari_img{
	text-align: center;
}
.shugenryou {
	width: 100%;
	background-color: #FCF1D9;
	margin: 0 auto;
	padding-bottom: 5em;
}
.shugenryo_img {
	text-align: center;
}
.shugenryou_txt {
	text-align: center;
	padding: 1em;
}
.shugenryou_txt p {
	text-height: 120%;
}
.kankyou {
	width: 100%;
	background-image: url(../images/kankyouback.jpg);
	background-repeat: no-repeat;
	margin: 0 auto;
	padding-bottom: 5em;
}
.kankyou_txt {
	text-align: center;
	padding: 1em;
	background: rgba(255,255,255,0.3);
}
.kankyou_txt p {
	color: #4d4d4d;
}
.shiken {
	width: 100%;
	background: #ffffff;
	margin: 0 auto;
	padding-bottom: 5em;
}
.shiken_txt {
	text-align: center;
	width: 90%;
	padding: 1em 1em 2em 1em;
}
.shiken p {
	text-height: 120%;
}
.shiken ul {
	width: 50%;
	margin: 0 auto;
	padding: 3em;
	border: 1px solid #999;
	background: #fff;
	text-align: left;
}
.shiken li {
	color: #666;
	font-size: 16px;
	letter-spacing: 0.2em;
	padding: auto 3em;
}
.pcnone {
	display: none;
}
/*======================== ▼ products =================================================================*/


#products_ttl {
	font-family: "Learning Curve";
	font-size: 3em;
	color: #514843;
	letter-spacing: 0.2em;
	text-align: center;
	margin: 1em 0 2em 0;
}
.kind_wrap {
	width: 100%;
	margin: 0 auto;
}
.kind_wrap p {
	font-size: 14px;
	letter-spacing: 0.2em;
	color: #4d4d4d;
}
.kind_ttl {
	margin: 1em;
	padding-left: 1em;
	border-left: 3px solid #94ccaa;
	font-size: 1.3em;
	color: #4d4d4d;
	font-weight: 100;
	letter-spacing: 0.5em;
	text-align: left;
}
.kind_block {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.kind_box img {
	margin: 1em;
}
/*======================== ▼ products/各商品紹介 ======================================================*/

.products_top {
	text-align: center;
	margin: 0;
}
.products_txtbox {
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: -1em auto 3em auto;
}
.products_txtboxfuwa {/*ふわっしゅ*/
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: -1em auto 3em auto;
	background: #FFDFE5;
}
.products_txtboxotona { /*おとなのふわっしゅ*/
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: -1em auto 3em auto;
	background: #C7F0FF;
}
.products_txtboxshin { /*心休水*/
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: -1em auto 3em auto;
	background: #CAEFCA;
}
.products_txtboxwan { /*ワンニャン*/
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: -1em auto 3em auto;
	background-color: #E1EEF0;
}
.products_txtboxyasai { /*やさい*/
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: -1em auto 3em auto;
	background: #E0EFBC;
}
.products_ttl {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 3em;
	padding: 1em;
	color: #666;
}
.products_txt {
	padding: 2em 2em 3em 2em;
	text-align: left;
	width: 100%;
	max-width: 1040px;
}
.products_txt p {
	line-height: 150%;
	letter-spacing: 0.3em;
}
.products_itemline {
	width: 100%;
	margin:0 auto;
}
.item_box {
	margin: 5% 0;
}
.lineup_ttl {
	font-weight: bold;
	letter-spacing: 0.3em;
	font-size: 18px;
	padding-bottom: 1em;
	text-align: center;
	color: #666;
}

/* ITEM LINEUP 3種類 */

.itemline {
	clear: both;
	position: relative;
}
.itemline ul {
	position: relative;
	left: 50%;
	float: left;
}
.itemline ul li {
	position: relative;
	left: -50%;
	float: left;
	list-style: none;
}

.itemline li {
	width: 30%;
	margin: 1%;

}
/* ITEM LINEUP 1種類 */

.itemline1 {
	clear: both;
	position: relative;
}
.itemline1 ul {
	position: relative;
	left: 50%;
	float: left;
}
.itemline1 ul li {
	width: 100%;
	margin: 1%;
	position: relative;
	left: -50%;
	float: left;
	list-style: none;
}
.item_kind {
	text-align: center;
	margin: 1em;
}
.item_button {
	width: auto;
	margin: 0 auto;
	background-color: #94ccaa;
	color: #fff;
	padding: 1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-align: center;
}
.item_button:hover {
	background-color: #ffffff;
	border: 2px solid #94ccaa;
	color: #94ccaa;
	padding: 1em;
	font-weight: bold;
	letter-spacing: 0.2em;
}
.products_item {
	text-align: center;
	margin: 3% 0;
}
/*======================== ▼　breadcrumb ======================================================*/

.breadcrumb {
	padding-left: 0;
	margin-left: 0;
}
.breadcrumb ul {
	margin: 0 1em 1em 1em;
}
.breadcrumb li {
	display: inline;
	list-style: none;
	letter-spacing: 0.3em;
	color: #999;
}
.breadcrumb li:after {
	content: '>';
	padding: 0 3px;
	color: #999;
}
.breadcrumb li:last-child:after {
	content: '';
}
.breadcrumb li a {
	text-decoration: none;
	color: #666;
}
.breadcrumb li a:hover {
	text-decoration: underline;
}
/*======================== ▼Footer ======================================================*/

#container_footer {
	background-image: url(http://shizen-no-megumisui.jp/images/footerback.jpg);
	max-width: 100%;
	text-align: center;
	padding: 5% 0;
	position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
footer p {
	color: #ffffff;
}
.snsicons ul {
	display: block;
	margin: 1em 0;
}
.snsicons li {
	display: inline;
	margin: 10px;
}
/* メールフォーム======================================================================　*/

.mailform {
	width: 90%;
	margin: 0 auto;
}
#formWrap {
	max-width: 100%;
	margin: 0 auto;
	color: #555;
	line-height: 120%;
	font-size: 90%;
	letter-spacing: 0.2em;
}
#formWrap p {
	font-size: 14px;
	letter-spacing: 0.2em;
}
table.formTable {
	width: 100%;
	margin: 3% auto;
	border-collapse: collapse;
}
table.formTable td, table.formTable th {
	padding: 10px;
}
table.formTable tr {
	width: 100%;
}
table.formTable th {
	width: 100%;
	font-weight: normal;
	background: #E5E5E5;
	text-align: left;
}
table.formTable td {
	width: 100%;
	font-weight: normal;
	background: #ffffff;
	text-align: left;
}
textarea {
	width: 100%;
	height: 10em;
}
#formboton {
	margin-bottom: 20px;
}
input.formbox {
	width: 80%;
}
#otoiawasearigatou {
	font-size: 2em;
}
.contact {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.kanryou {
	width: 90%;
	margin: 0 auto 15% auto;
}
.kanryou p {
	font-size: 14px;
	letter-spacing: 0.2em;
	line-height: 170%;
}
#otoiawase {
	font-size: 2em;
	font-weight: bold;
	color: #94ccaa;
}

input{
height:2em;
}
/* 会社概要============================================================================ */


.companyinfo {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.companyinfo table {
	width: 100%;
	height: auto;
	font-size: 14px;
	letter-spacing: 0.2em;
	margin-bottom: 3em;
}
.companyinfo th {
	width: 100%;
	border-bottom: #CCC solid 1px;
	margin: 1%;
	padding: 10px;
	font-weight: bold;
	color: #666;
}
.companyinfo td {
	width: 100%;
	border-bottom: #CCC solid 1px;
	margin: 1%;
	padding: 10px;
	color: #666;
}
.companyinfo a {
	text-decoration: none;
	color: #666;
}

/* ============================================================================ */

 @media screen and (max-width : 480px) {
/* ▼index============================================================================ */

#concept1 {
	font-size: 1.5em;
}
#concept2 {
	font-size: 1em;
	margin-bottom: 0;
}
/* ▼index/news============================================================================ */
.newsbox dt {
	padding: 0.5em;
	margin-right: 0;
	float : none;
	clear : both;
	color: #666;
	text-align: left;
}
.newsbox dd {
	padding: 1em 0 1em 1em;
	text-align: left;
	letter-spacing: 0.2em;
	color: #4d4d4d;
}
/* ▼about============================================================================ */



.about_txt, .kodawari_txt, .shugenryou_txt, .kankyou_txt {
	text-align: left;
}
.shiken_txt {
	text-align: left;
}
.aboutttl, .aboutttlkankyou {
	font-size: 2em;
	margin: 0 2px;
}
.shiken ul {
	width: 80%;
}
/* ▼product============================================================================ */


.products_ttl {
	font-size: 2em;
	padding: 1em 0.5em 0.5em 0.5em;
}
.products_txt p {
	letter-spacing: 0.2em;
}
.products_txt {
	padding: 2em 3em 3em 2em;
	text-align: left;
	max-width: 85%;
	margin:0 auto;
}
.products_txt p {
	line-height: 150%;
	letter-spacing: 0.2em;
}

.products_txtboxyasai { /*やさい*/
	padding: 2em 2em 3em 0em;

}

/* ▼contact・company============================================================================ */

table.formTable {
	width: 98%;
}
table.formTable tbody {
	width: 100%;
}
table.formTable tr {
	width: 100%;
}
table.formTable td {
	width: 100%;
}
.gmap {
	max-width: 100%;
	height: auto;
}
.mailform {
	width: 100%;
	margin: 0 auto;
}
/* ▼footer============================================================================ */
footer {
	margin-bottom: 0.5em;
}
footer p {
	fomt-size: 10px;
}
}

/* ============================================================================ */
@media only screen and (min-width:480px) and (max-width:768px) {
.products_txt {
	padding: 2em 2em 3em 2em;
	text-align: left;
	max-width: 90%;
}

.topbana li{
	display:inline-block;
	margin:0 5px;
}

}