@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); }
body{ font-size: 14px; }
html, body{ height:100%; }
li{list-style-type:none; }

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

/* ------▼▼▼header   -------------------------------------------------------------------------------------------------------------------------- */
header{ width: 100%; height: 100px; background-image: url(./img/headerBack.jpg); position: relative; }
#companyName{ width: 1100px; left: 0; right: 0; position: absolute; margin: auto; }
#companyName img{ margin: 20px 0 0 50px; width: 280px; }
#companyName h4{ color: #fff; font-size: 25px; margin: 15px 0 0 50px; text-shadow: 1px 1px 3px #000; letter-spacing: 2px; }
.pageTitle{  width: 1100px; left: 0; right: 0; position: absolute; margin: auto; }
.pageTitle h5{ color: #fff; font-size: 18px; margin: 58px 0 0 50px; text-shadow: 1px 1px 3px #000; letter-spacing: 2px; }

/* ------▼▼▼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; text-align: center; }
nav ul li a{ color: #fff; font-size: 14px; }
nav ul li:nth-child(5){ background-color: rgba(255,255,255,0.1); width: 90px; height: 50px; margin-top: 2px; }
nav ul li:nth-child(5) a{ color: #fff; font-size: 14px;  margin-top: 13px;}

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

/* ------▼▼#left_column   ----------------------------------------------------------------------------------------------------------- */
#left_column{ float: left; width: 285px; }

/* ------▼.left_nav  ----------------------------------------------------------------------------------------------------------- */
.left_nav{ width: 285px; height: 400px; margin-top: 15px; background-color: rgba(255,255,255,0.65); border-radius: 5px; z-index: 1; position: relative; margin-left: 15px; padding-top: 5px; }

.leftTitle{ border-top: solid 1px #2e0c09; border-bottom: solid 1px #2e0c09; margin: 20px 20px 20px; 20px; text-align: left; }
.leftTitle p{ font-size: 16px; color: #2e0c09; text-align: center; }

.contact_form{ margin: 10px 0 0 20px; width: 245px; border-radius: 3px; background-color: #451964;  height: 60px;    
line-height: 60px; text-align: center; color: #fff; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
.contact_form:hover{ -webkit-filter: opacity(75%);
     -moz-filter: opacity(75%);
     -o-filter: opacity(75%);
     -ms-filter: opacity(75%);
     filter: opacity(75%);
}
.contact_form a{ display: block; font-size: 16px; color: #fff; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
.contact_form a:hover{ font-size: 16px; color: rgb(238,141,152); }
.contact_tel{ margin: 10px 0 0 20px; width: 245px; border-radius: 3px; background-image: url(./img/tel_back.jpg);  height: 60px;    
line-height: 60px; text-align: center; color: #fff; font-size: 16px; }
.contact_tel p{ font-size: 16px; }
.contact_fax{ margin: 10px 0 0 20px; width: 245px; border-radius: 3px; background-image: url(./img/fax_back.jpg);  height: 60px;    
line-height: 60px; text-align: center; color: #fff; font-size: 16px; }
.contact_fax p{ font-size: 16px; }
.contact_email{ margin: 10px 0 0 20px; width: 245px; border-radius: 3px; background-image: url(./img/email.jpg);  height: 60px;    
line-height: 60px; text-align: center; color: #fff; font-size: 16px; }
.contact_email p{ font-size: 16px; }

.pageLink li{ margin: 10px 0 0 20px; width: 245px; height: 10px; border-radius: 3px; background-color: #65060c;  height: 30px;    
line-height: 30px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
.pageLink li:hover{ 
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

.pageLink .li_1{ background-color: #65060c; }
.pageLink .li_2{ background-color: #58070b; }
.pageLink .li_3{ background-color: #4a080b; }
.pageLink .li_4{ background-color: #3c0a0a; }
.pageLink .li_5{ background-color: #2e0c09; }
.pageLink li a{  display: block; color: #fff;  font-size: 14px; margin-left: 10px; }

.contentLink_1{ margin: 30px 0 0 20px; width: 245px; height: 30px; border-radius: 3px; }
.contentLink_1 img{ width: 245px;  -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; } 
.contentLink_2{ margin: 95px 0 0 20px; width: 245px; height: 30px; border-radius: 3px; }
.contentLink_2 img{ width: 245px;  -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }

.contentLink_1 img:hover{ 
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
	 -webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: grayscale(100%);

}
.contentLink_2 img:hover{ 
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: grayscale(100%);
}

/* ------▼.left_navFloat  ----------------------------------------------------------------------------------------------------------- */
.left_navFloat{ width: 285px; height: 400px; margin-top: 15px; background-color: rgba(255,255,255,0.65); border-radius: 5px; z-index: 30;  margin-left: 15px; padding-top: 5px; position: fixed; top: 5px; }


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


/* ------▼#main #right_column .newsContainer----------------------------------------------------------------------------------------------------------- */
#customerTop{ width: 775px; height: 250px; }
.customerTitle{ width: 700px; height: 22px; border-radius: 3px;  background-image: url(./img/titleBar_3.jpg); margin: 20px 0 0 30px; padding-top: 3px; }
.customerTitle p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }
.customerPhoto{ float: right; width: 200px; height: 200px; margin: 20px 60px 0 0; overflow: hidden; }
.customerPhoto img{ height: 200px; }
.customerComent{ float: left; width: 420px; padding: 30px 30px 0 50px; }
.customerComent h3{ font-size: 18px; margin-bottom: 10px; }
.customerComent h5{ font-size: 16px; margin-bottom: 10px; }
.customerComent p{ font-size: 15px;  line-height: 26px; }

.menu{ margin-top: 25px; }
.category{ margin-bottom: 10px; }
.column_left{ float: left; width: 90px; font-size: 9px; }
.column_right{ float: left; width: 330px; font-size: 14px; }
.clear{ clear: both; }

/* ------▼▼▼footer   ----------------------------------------------------------------------------------------------------------- */
footer{  width: 100%; height: 50px; padding-top: 30px; background-color: #2e0c09; clear: both; }
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; }