@charset "utf-8";
/* CSS Document */

/* ------▼▼▼▼*  -------------------------------------------------------------------------------------------------------------------------- */
*{ margin: 0; padding: 0; font-size: 13px; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;}
a{ text-decoration : none; color: #000; }

a{ display: block; text-decoration: none; color: #000; 
            -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }
a:hover{ color: rgb(238,141,152); }
html, body{ height:100%; width: 100%; }
body{ box-sizing:border-box; }
li{list-style-type:none; }

#container{ width: auto; height: 1753px; background-color: rgba(159,109,104,0.4); position: relative;  }

/* ------▼▼▼header   -------------------------------------------------------------------------------------------------------------------------- */
header{ width: 100%; height: 200px; background-image: url(./img/headerBack.jpg); position: relative; overflow: hidden; }
#companyName{ width: 1100px; left: 0; right: 0; position: absolute; margin: auto; }
#companyName img{ margin: 20px 0 0 50px; width: 350px; }
#companyName h4{ color: #fff; font-size: 25px; margin: 20px 0 0 50px; text-shadow: 1px 1px 3px #000; letter-spacing: 2px;  }
#companyAdress{  width: 1380px; left: 0; right: 0; position: absolute; text-align: center; }
#companyAdress h5{ position: relative; color: #2e0c09; font-size: 16px; margin: 155px 0 0 360px; text-shadow: 3px 3px 3px #fff; letter-spacing: 2px; z-index: 10; }
#companyAdress .shadow{ position: absolute; top: 150px; left: 620px; width: 485px; height: 30px; background-color: rgba(255,255,255,0.6); 
-webkit-filter: blur(8px);
filter: blur(8px);
}

/* ------▼▼▼nav -------------------------------------------------------------------------------------------------------------------------- */
nav{ width: 100%; height: 50px; background-color: #2e0c09; }
nav ul{ width: 810px; margin-left: 150px; }
nav ul li{ float: left; margin-top: 15px; width: 90px;  height: 50px;  text-align: center; }
nav ul li a{ color: #fff; font-size: 14px; }
nav ul li:nth-child(1){ background-color: rgba(255,255,255,0.1); width: 90px; height: 50px; margin-top: 2px;  }
nav ul li:nth-child(1) a{ color: #fff; font-size: 14px;  margin-top: 13px; }

/* ------▼▼▼#main   -------------------------------------------------------------------------------------------------------------------------- */
#main{ width: 1100px; height: 1490px;  
    left: 0;
    right: 0;
    margin: auto;
	clear: both; 
}

/* ------▼▼#main #left_column   ----------------------------------------------------------------------------------------------------------- */
#left_column{ float: left; width: 285px; height: 1470px; margin-top: 5px; margin-left: 15px; background-color: rgba(255,255,255,0.65); border-radius: 5px; z-index: 1; position: relative; }

/* ------▼#left_topSpace   --------------------------------------------------------------------------------------------- */
#left_topSpace{ position: relative;  width: 285px; height: 460px; z-index: 1; }
.goodsTitle{ border-top: solid 1px #2e0c09; border-bottom: solid 1px #2e0c09; margin: 25px 20px 0 20px; }
.goodsTitle p{ font-size: 16px; color: #2e0c09; text-align: center; }

.goods_1{ position: relative; margin: 30px 0 0 20px; width: 250px; height: 260px; z-index: 6; }
.goods_1 a{ display: block; font-size: 14px; color: #000; width: 150px; height: 18px; margin-bottom: 3px;  padding-left: 15px; border-radius: 0 4px 4px 0; background-color: rgba(255,255,255,0.5); }
.goods_1 a:hover{ color: #F69; }
.goodsPhoto_space{ position: absolute; width: 245px; height: 285px; top: 40px; left: 20px; overflow: hidden; z-index: 5; }
.goodsPhoto{ display: none; position: absolute; z-index: 2; }


.goods_2{ position: relative; width : 245px; height: 23px; border-radius: 3px; background-color: #fff; margin-top: 18px; margin-left: 20px;  
box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-moz-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-webkit-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; 
}
.goods_2:hover{ background-color: rgba(101,6,12,1); color: #fff; }
.goods_2:hover a{ color: #fff; }


.goods_3{ position: relative; width : 245px; height: 23px; border-radius: 3px; background-color: #fff; z-index: 3; margin-top: 5px; margin-left: 20px; 
box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-moz-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-webkit-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3); 
-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; 
}
.goods_3:hover{ background-color: rgba(101,6,12,1); color: #fff; }
.goods_3:hover a{ color: #fff;}


.goods_4{ position: relative; width : 245px; height: 23px; border-radius: 3px; background-color: #fff; z-index: 3; margin-top: 5px; margin-left: 20px; 
box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-moz-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-webkit-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3); 
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; 
}
.goods_4:hover{ background-color: rgba(101,6,12,1); color: #fff;}
.goods_4:hover a{ color: #fff;}


.goods_5{ position: relative; width : 245px; height: 23px; border-radius: 3px; background-color: #fff; z-index: 3; margin-top: 5px; margin-left: 20px; 
box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-moz-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-webkit-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3); 
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; 
}
.goods_5:hover{ background-color: rgba(101,6,12,1); color: #fff; }
.goods_5:hover a{ color: #fff;}


.goods_6{ position: relative; width : 245px; height: 23px; border-radius: 3px; background-color: #fff; z-index: 3; margin-top: 5px; margin-left: 20px; 
box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-moz-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3);
-webkit-box-shadow:1px 1px 1px 0px rgba(101,33,57,0.3); 
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; 
}
.goods_6:hover{ background-color: rgba(101,6,12,1); color: #fff;}
.goods_6:hover a{ color: #fff;}

.goodsOther{ line-height: 23px; text-align: center;font-size: 14px;}

.leftBack_photo{ position: absolute; top: 43px; left: 20px; width: 245px; height: 280px; z-index: 2; overflow: hidden; }

/* ------▼#left_bottomunSpace   --------------------------------------------------------------------------------------------- */
#left_bottomunSpace{ width: 285px; height: 425px; border-radius: 5px; position: relative; z-index: 1; }

#left_bottomunSpace img{ width: 240px;  margin: 12px 0 0 22px; border: solid 1px #CCC; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
.link_1{ margin-top: 12px; }
#left_bottomunSpace a{ }
#left_bottomunSpace img:hover{
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

/* ------▼▼#main #right_column   ----------------------------------------------------------------------------------------------------------- */
#right_column{ float: right; width: 780px; height: 1470px; margin-top: 5px; border-radius: 5px; background-color: rgba(255,255,255,0.65); position: relative; } 

/* ------▼#originarProduct------------------------------------------------------- */
#originalProduct{ width: 775px; height: 150px; clear: both; }

#originalProduct #originalP_Content_1{ float: left; width: 332px; height: 150px; border-radius: 6px; overflow: hidden; }
#originalProduct #originalP_Content_1 P{ display: block; background-image: url(./img/kaikannsetu.jpg);width: 332px; height: 150px; }
#originalProduct #originalP_Content_1 a:hover{ background-image: url(./img/kaikannsetu_h.jpg); width: 332px; height: 150px; }

#originalProduct #originalP_Content_2{ float: left; width: 332px; height: 150px; border-radius: 6px; overflow: hidden;}
#originalProduct #originalP_Content_2 P{ display: block; background-image: url(./img/kinakoTop.jpg);width: 332px; height: 150px; }
#originalProduct #originalP_Content_2 a:hover{ background-image: url(./img/kinakoTop_h.jpg); width: 332px; height: 150px; }


/* ------▼#news----------------------------------------------------------------------------------------------------------- */
#news{ position: relative; width: 775px; height: 290px; }
#news .titleBorder_news{ width: 700px; height: 22px; border-radius: 3px;  background-image: url(./img/titleBar_1.jpg); margin: 20px 0 0 30px; padding-top: 3px; }
#news .titleBorder_news p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }

#news .newsSpace{ position: relative; margin: 18px 0 0 30px; }
#news .newsOne{  width: 700px; height: 45px; }
#news .newsOne2{  width: 700px; height:65px; }
.topLine a{ margin-left: 15px; font-size: 14px; margin-top: 5px; }
.bottomLine p{ margin-left: 123px; font-size: 14px; }

.newsRed{ position: absolute; top: 2px; left: 320px; width: 60px; height: 16px; line-height: 16px; color: #fff; background-color: #900; text-align: center; border-radius: 3px; }

/* ------▼#message----------------------------------------------------------------------------------------------------------- */
#message{ width: 775px; height: 605px; }
#message .titleBorder_message{ width: 700px; height: 22px; border-radius: 3px; background-image: url(./img/titleBar_2.jpg); margin: 20px 0 0 30px; padding-top: 3px; margin-bottom: 15px; }
#message .titleBorder_message p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }

.messageSpace{ width: 700px; height: 160px; padding: 10px 0 10px 32px; }
.messageSpace_photo{ float: left; width: 200px; height: 160px; overflow: hidden; }
.messageSpace_photo img{ width: 200px; height: 160px; }
.messageSpace_coment{ float: left; width: 450px; height: 160x; margin-left: 20px; }
.messageSpace_coment .comentTitle{ font-size: 22px; }
.messageSpace_coment p{ font-size: 14px; }
.comentLink{ margin: 5px 0 0 250px; }

/* ------▼#ourContent----------------------------------------------------------------------------------------------------------- */
#ourContent{ width: 775px; height: 295px; position: relative; }
#ourContent .titleBorder_ourCcontent{ width: 700px; height: 22px; border-radius: 3px; background-image: url(./img/titleBar_3.jpg); margin: 10px; 0 0 30px; padding-top: 3px;}
#ourContent .titleBorder_ourCcontent p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }

.contentBox{ float: left; width: 332px; height: 150px; border-radius: 4px; border: 1px solid #fff; margin-left: 30px; margin-top: 20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
.contentBox2{ float: left; width: 332px; height: 150px; border-radius: 4px; border: 1px solid #fff; margin-left: 210px; margin-top: 20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
.contentBox img{ border-radius: 6px; -webkit-filter: grayscale(1);filter: gray; filter: grayscale(1);filter: url(#gray); }
.contentBox img:hover{ 
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

#content_3{ border-radius: 6px; overflow: hidden; }
#content_3 a{ background-image: url(./img/content_3.jpg);  width: 332px; height: 150px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;  }
#content_3 a:hover{ background-image: url(./img/content_3_h.jpg);  width: 332px; height: 150px; }

#content_4{ border-radius: 6px; overflow: hidden; }
#content_4 a{ background-image: url(./img/content_5.jpg);  width: 332px; height: 150px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;  }
#content_4 a:hover{ background-image: url(./img/content_5_h.png);  width: 332px; height: 150px; }

#svg image{-webkit-filter: grayscale(1);filter: gray; filter: grayscale(1);filter: url(#gray); }
#svg image:hover{-webkit-filter: grayscale(0);filter: none !important※; filter: grayscale(0); }


.clear{ clear: both; }

/* ------▼▼▼footer   ----------------------------------------------------------------------------------------------------------- */
footer{  width: 100%; height: 50px; padding-top: 30px; background-color: #2e0c09; }
footer p{ font-size: 14px; color: #fff; text-align: center; }

/* ------▼▼▼page-top   ----------------------------------------------------------------------------------------------------------- */
#page-top{ position: fixed; bottom: 100px; right: 0px;  }
#page-top a{ background-color: #2e0c09;  text-decoration: none; color: #fff; width: 80px; padding: 30px 0; text-align: center; display: block; border-radius: 5px 0 0 5px; font-size: 12px; }
#page-top a:hover{ text-decoration: none; background: #999; }