@charset "utf-8";

*, *: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;
}

/*----------------------------------------------------------
  レイアウト関係
----------------------------------------------------------*/
html{
  margin: 0;
  padding: 0;
  height: 100%;		/*　包括要素を画面いっぱいにするための対応　*/
	background-image: url(image/bg/bg_main.jpg);
}

/*---------------------------------フォントサイズなど*/
body {
  margin: 0;
  padding: 0;
  min-height: 100%;	/* コンテンツが少ない場合は画面いっぱいに表示し、画面100%を超えたら縦に延びる */
  text-align: center;
  font-size: small;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
*/
	color: rgba(102,102,102,1);
  position: relative;
}

/*---------------------------------イメージの初期設定*/
img {
	border: none;
}

header {
  background-color: rgba(255,255,255,1);
	height: 30px;
}

/*---------------------------------コンテンツ部分*/
article {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
	text-align: left;
}
/*---------------------------------フッター部分*/
footer {
  background-color: rgba(255,255,255,1);

	/* コンテンツが少ない場合、フッターを画面下位置にくっつける */
/*
	width: 100%;
	position: absolute;
	bottom: 0;
*/
}

/*---------------------------------ヘッダー、フッター、コンテンツ部分 内部包括*/
.inner {
  margin: 0px auto 0px auto;
  width: 1024px;
}
article .inner {
	margin: 300px auto 30px auto;
	padding: 30px;
	background-color: rgba(255,255,255,1);
}


/*----------------------------------------------------------
  特殊処理
----------------------------------------------------------*/

/*---------------------------------ClearFix*/
.clearfix {
	overflow: hidden;
}

/*---------------------------------テキストの垂直配置*/
/* 上揃え */
.valign-top {
  position: absolute;
  top: 0;
}
/* 中央揃え（要親要素へposition: relative;） */
.valign-middle {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
}
/* 下揃え */
.valign-bottom {
  position: absolute;
  bottom: 0;
}


/*----------------------------------------------------------
  メニュー部分の指定
----------------------------------------------------------*/
header {
	position: fixed;
	width: 100%;
	z-index: 5000;
}

/*---------------------------------サイト説明*/
header h1 {
  margin: 8px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 8pt;
	font-weight: normal;
	text-align: right;
	width: 405px;
	float: right;
}
#logo_site{
	display: inline-block;
	width: 190px;
}
#logo_site a {
	display: block;
	width: 100%;
	overflow: hidden; 
	background-image: url(image/navi/bnr_sitelogo_on.png);
	background-repeat: no-repeat;
}
#logo_site a:hover img {
	visibility: hidden;
}

/*---------------------------------メインナビゲーション*/
ul.menu {
  margin: 5px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
	width: 405px;
	float: left;
}
ul.menu li {
  float: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
	width: 135px;
}
ul.menu li a {
  text-decoration: none;
	color: rgba(102,102,102,1);
}
ul.menu li a:hover {
	border-bottom: rgba(0,153,51,1) solid 2px;
}
ul.menu li a.active {
	border-bottom: rgba(0,153,51,1) solid 2px;
}

/*---------------------------------問い合わせ部分*/
header section {
	text-align: right;
	margin-top: -15px;
}


/*----------------------------------------------------------
  フッター部分の指定
----------------------------------------------------------*/
footer .inner {
  padding: 0px 0px 0px 0px;
	text-align: left;
  color: rgba(0,153,51,1);
}

div#signature {
	margin: 60px 0px 0px 30px;
	width: 324px;
	float: left;
}
div#signature a {
	display: block;
	width: 100%;
	overflow: hidden; 
	background-image: url(image/navi/bnr_sitelogo_foot_on.png);
	background-repeat: no-repeat;
}
div#signature a:hover img {
	visibility: hidden;
}

div#locate {
	margin: 30px 0px;
	width: 324px;
	float: left;
}
div#locate address {
	width: 154px;
	height: 154px;
	float: left;
	padding-top: 140px;
	font-weight: bold;
	font-size: 11px;
	line-height: 1.2em;
	font-style: normal;
	background-image: url(image/navi/map.png);
	background-position: center top;
	background-repeat: no-repeat;
}
div#locate #haitatsu {
	width: 154px;
	height: 154px;
	float: right;
	font-size: 10px;
	line-height: 1.2em;
}
div#locate #haitatsu h3 {
	margin: 0 0 4px 0;
}

div#bnr_contact {
	margin: 30px 0px;
	float: right;
}


/*---------------------------------ページの先頭へ部分*/
#pagetop {
	display: none;
	position: fixed;
	bottom: 120px;
	right: 30px;
}
#pagetop a {
	display: block;
	overflow: hidden; 
	width: 110px;
	height: 0px; 
	padding-top: 131px;
	background-image: url(image/navi/bnr_ptop.png); 
}
#pagetop a:hover {
	background-image: url(image/navi/bnr_ptop_on.png); 
}

/*---------------------------------コピーライト部分*/
#copyright {
  color: #ffffff;
  background-color: rgba(0,153,51,1);
}


/*----------------------------------------------------------
  コンテンツ毎イメージ
----------------------------------------------------------*/
article {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	min-width: 1024px;
}
#home article {
	background-image: url(image/bg/bg_eyecatch.jpg);
}
#about article {
	background-image: url(image/bg/bg_ttlabout.png);
}
#concept article {
	background-image: url(image/bg/bg_ttlconcept.png);
}
#product article {
	background-image: url(image/bg/bg_ttlproduct.png);
}


/*----------------------------------------------------------
  コンテンツヘッダー
----------------------------------------------------------*/
#contents-header {
}


/*----------------------------------------------------------
  コンテンツフッター
----------------------------------------------------------*/
#contents-footer {
}



/*----------------------------------------------------------
  コンテンツ内部
----------------------------------------------------------*/
/*---------------------------------タイトル部分*/
article h2 {
	position: relative;
	margin: -120px 0px 0px 0px;
	text-align: left;
}

article h3 {
	background-image: url(image/bg/bg_h3.png);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	height: 40px;
	padding-top: 8px;
}

article h4 {
	margin: 0px 0px 20px 0px;
	color: rgba(0,153,51,1);
}
article h5 {
	margin-bottom: -0.8em;
}

/*---------------------------------本文*/
article p {
	line-height: 1.8em;
}
article section {
	margin: 0px 0px 1.8em 0px; 
}
.read {
	text-align: center;
}

/*---------------------------------表*/
article table th, article table td {
	padding: 5px 10px;
}
article table th {
	text-align: center;
}
article table td {
	text-align: left;
}


/*----------------------------------------------------------
  コンテンツ文章レイアウトパターン
----------------------------------------------------------*/

/*---------------------------------コンテンツ内のレイアウト分け*/
/* 3分の1分け */
.split_1-3_left {
	margin-right: 8px;
  width: 316px;
  float: left;
}
.split_1-3_right {
	margin-right: 0px;
  width: 316px;
  float: right;
}


/*----------------------------------------------------------
  ＨＯＭＥページ個別指定
----------------------------------------------------------*/
#home article .inner {
	margin: 550px auto 0px auto;
	padding: 0px 38px;
	width: 1100px;
	height: 550px;
	background-image:url(image/bg/bg_home.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-color: transparent;
	text-align: center;
}
#home article h2 {
	position: absolute;
	margin: -240px 0px 0px 160px;
}

/*---------------------------------お知らせエリア*/
#news {
	width: 478px;
	height: 218px;
	margin: 8px auto;
	padding: 50px 0px 30px 0px;
	text-align: left;
}
#news dt {
/*	display: inline-block;*/
	float: left;
	width: 90px;
}
#news dd {
/*	display: inline-block;*/
	margin: 0px 0px 0px 0px;
}

/*---------------------------------バナーエリア*/
div#banner, div#example {
	margin: 0px;
	padding: 0px;
	margin: auto;
	width: 964px;
}
/* 施工例 */
#bnr_example {
  width: 316px;
	height: 154px;
	margin: 0px 8px 8px 162px;
	padding: 20px;
	float: left;
	text-align: left;
}
/* こだわりバナー */
#bnr_kodawari {
  width: 478px;
	height: 154px;
	margin: 0px 0px 8px 0px;
	float: left;
	text-align: left;
}
#bnr_kodawari p {
	width: 176px;
}
#bnr_kodawari a {
	display: block;
	width: 100%;
	padding: 20px;
	overflow: hidden; 
	background-image: url(image/bg/bg_bnr_kodawari.png);
	background-position: right top;
	background-repeat: no-repeat;
	text-decoration: none;
	color: rgba(102,102,102,1);
}
#bnr_kodawari a:hover {
	background-image: url(image/bg/bg_bnr_kodawari_on.png);
	color: rgba(153,153,153,1);
}


/*----------------------------------------------------------
  会社概要ページ個別指定
----------------------------------------------------------*/
section#member {
	margin: 0px 0px 0px 73px;
	text-align: left;
}
section#member img {
	float: left;
}
section#member section {
	float: left;
	width: 397px;
	padding: 10px;
	border-left: rgba(102,102,102,1) solid 1px;
}

/* アクセス部分のレイアウトを破綻させる */
section#access {
	width: 1024px;
	margin-left: -30px;
}
section#access iframe {
	margin-top: -6px;
}

#gaiyo table {
  width: 800px;
	margin: 0px auto;
}
#gaiyo table tbody tr:nth-child(odd) { /* 奇数番目の指定*/
	background-color: rgba(192,210,146,1);
} 


/*----------------------------------------------------------
  こだわりページ個別指定
----------------------------------------------------------*/
/* ポイント設定 */
.point {
	margin-left: 73px;
	width: 405px;
	float: right;
	text-align: left;
}
.point_img {
	margin-left: 73px;
	width: 405px;
	float: left;
	text-align: left;
}
.point span {
	width: 73px;
	padding: 2px 18px 2px 52px;
	background: url(image/title/h_point.png);
	background-position: left top;
	background-repeat: no-repeat;
}

div#example img {
	padding: 0px 8px 0px 0px;
}
div#example div {
	margin: 0px;
}

/* 順序設定 */
.step span {
	width: 73px;
	padding: 2px 18px 2px 52px;
	background: url(image/title/h_step.png);
	background-position: left top;
	background-repeat: no-repeat;
	color: rgba(255,255,255,1);
}
.step div {
	width: 316px;
	float: left;
	margin: 0px 8px 0px 81px;
	text-align: left;
}
.step img {
	float: left;
	margin-right: 6px;
}


/*----------------------------------------------------------
  作品紹介ページ個別指定
----------------------------------------------------------*/
#kounou div#kounou_p {
	width: 559px;
	float: left;
}
#kounou div#kounou_img {
	width: 397px;
	height: 100%;
	float: right;
	text-align: center;
}

/*---------------------------------商品にんじゃイメージ*/
#pro_ura {
	background-image: url(image/product/ninja_ura.png);
	background-position: right top;
	background-repeat: no-repeat;
}
#pro_kae {
	background-image: url(image/product/ninja_kae.png);
	background-position: right 20px;
	background-repeat: no-repeat;
}
#pro_toko {
	background-image: url(image/product/ninja_toko.png);
	background-position: right 10px;
	background-repeat: no-repeat;
	min-height: 130px;
}
#pro_ura .read {
	background-image: url(image/product/meyasu3.png);
	background-position: left center;
	background-repeat: no-repeat;
}
#pro_kae .read {
	background-image: url(image/product/meyasu5.png);
	background-position: left center;
	background-repeat: no-repeat;
}
#pro_toko .read {
	background-image: url(image/product/meyasu20.png);
	background-position: left center;
	background-repeat: no-repeat;
}

/*---------------------------------い草の種類*/
#kind_of_igusa {
	position: relative;	/* 順位アイコンを付けるため設定 */
	width: 1024px;
	height: 340px;
	margin: -35px 0px 30px -30px;
	padding: 20px 0px;
	background: url(image/bg/bg_igusa.jpg);
	background-repeat: no-repeat;
}

/* 人気順アイコン */
#kind_of_igusa #no1 {
	position: absolute;
	top: 150px;
	left: 120px;
}
#kind_of_igusa #no2 {
	position: absolute;
	top: 190px;
	left: 220px;
}
#kind_of_igusa #no3 {
	position: absolute;
	top: 120px;
	left: 220px;
}

#kind_of_igusa table {
/*	width: 640px;*/
	margin-left: 111px;
	border-spacing: 8px 4px;
	border-collapse: separate;
}

/* 見出し行 */
#kind_of_igusa table tr:first-child th {
	color: rgba(0,153,51,1);
	background-color: rgba(255,255,255,0.6);
}
#kind_of_igusa table tr th:nth-of-type(1),
#kind_of_igusa table tr th:nth-of-type(2) {
	width: 154px;
}
#kind_of_igusa table tr th:nth-of-type(3) {
	width: 316px;
}

/* 人気が高い商品名を強調 */
#kind_of_igusa table tr:nth-of-type(4) th,
#kind_of_igusa table tr:nth-of-type(5) th,
#kind_of_igusa table tr:nth-of-type(6) th {
	font-size: larger;
}

/* 価格列 */
#kind_of_igusa table tr td:nth-of-type(1) {
	width: 154px;
	padding: 0px 30px;
	text-align: right;
	color: rgba(204,0,0,1);
	font-weight: bold;
	font-size: larger;
}

/* 店主からのひとこと列 */
#kind_of_igusa table tr td:nth-of-type(2) {
	width: 316px;
}

/*---------------------------------デザイン畳オモテの例*/
#kind_of_omote {
	text-align: center;
	position: relative;
}
#osyare_ninja {
	position: absolute;
	top: -115px;
	right: 40px;
}

/*---------------------------------とこの種類*/
#kind_of_toko section {
	border: rgba(0,153,51,1) solid 1px;
	text-align: right;
	padding: 8px;
	height: 130px;
}
#kind_of_toko section#toko_ken {
	background:url(image/product/toko_ken.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
#kind_of_toko section#toko_sand {
	background:url(image/product/toko_sand.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
#kind_of_toko section#toko_hon {
	background:url(image/product/toko_hon.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}

#kind_of_toko h4 {
	border-bottom: rgba(0,153,51,1) solid 1px;
	width: 160px;
	margin: 0px 0px 4px auto;
	text-align: center;
}
#kind_of_toko p {
	width: 160px;
	margin: 0px 0px 4px auto;
	text-align: left;
	line-height: 1.4em;
	
	/* 文字を縁取りする(IE用) */
/*	filter:
		dropshadow(color=#ffffff,offX= 0,offY=-1)
		dropshadow(color=#ffffff,offX= 1,offY= 0)
		dropshadow(color=#ffffff,offX= 0,offY= 1)
		dropshadow(color=#ffffff,offX=-1,offY= 0);
	
	-webkit-text-stroke-color: #ffffff;
	-webkit-text-stroke-width: 1px;*/
	
	/* 文字を縁取りする(IE以外) */
/*	text-shadow: #ffffff 1px  1px 0px, #ffffff -1px  1px 0px,
							 #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;*/
}
/* アイコン */
#kind_of_toko div {
	width: 160px;
	margin-left: auto;
	text-align: center;
	font-size: 11px;
	background-color: rgba(204,51,0,1);
	color: rgba(255,255,255,1);
}