@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: 2833px; background-color: rgba(159,109,104,0.4); position: relative; verflow: hidden; }

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

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

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


/* ------▼.left_nav   ----------------------------------------------------------------------------------------------------------- */
.left_nav{ width: 285px; height: 460px; 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: center; }
.leftTitle p{ font-size: 16px; color: #2e0c09; text-align: center; }
.pageLink li{ margin: 10px 0 0 20px; width: 245px; height: 10px; border-radius: 3px; background-color: #65060c;  height: 30px;    
line-height: 30px; text-aline: center; -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; text-align: center; }

.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%);
}
.contentLink_2 img:hover{ 
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

/* ------▼.left_navFloat ----------------------------------------------------------------------------------------------------------- */
.left_navFloat{ width: 285px; height: 460px; 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: 2645px; margin-top: 15px; border-radius: 5px; background-color: rgba(255,255,255,0.65); position: relative; } 

/* ------▼#president----------------------------------------------------------------------------------------------------------- */
#president{ width: 775px; height: 515px; }
#president .titleBorder_president{ width: 700px; height: 22px; border-radius: 3px;  background-image: url(./img/titleBar_c1.jpg); margin: 20px 0 0 30px; padding-top: 3px; }
#president .titleBorder_president p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }
#president .presidentPhoto{ float: left; width: 200px; height: 280px; margin: 30px 0 0 50px; }
#president .presidentComent{ float: left; width: 440px; padding: 30px 30px 0 30px; }
#president .presidentComent h3{ font-size: 18px; margin-bottom: 10px; }
#president .presidentComent p{ font-size: 14px; }

/* ------▼#vision----------------------------------------------------------------------------------------------------------- */
#vision{ width: 775px; height: 650px; }
#vision .titleBorder_vision{ width: 700px; height: 22px; border-radius: 3px; background-image: url(./img/titleBar_c2.jpg); margin: 20px 0 0 30px; padding-top: 3px; }
#vision .titleBorder_vision p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }

.visionTitle{ margin: 30px 0 0 58px; }
.visionTitle h2{ font-size: 20px; color: #58070b; }
.visionSpace_coment{ float: left; width: 640px; margin: 20px 50px 0 60px;  }
.visionSpace_coment .visionTitle{ font-size: 20px; margin: 5px 0 5px 0; }
.visionSpace_coment p{ font-size: 14px; }

/* ------▼#outline----------------------------------------------------------------------------------------------------------- */
#outline{ width: 775px; height: 490px; position: relative; }
#outline .titleBorder_outline{ width: 700px; height: 22px; border-radius: 3px; background-image: url(./img/titleBar_c3.jpg); margin: 10px 0 0 30px; padding-top: 3px; position: relative; }
#outline .titleBorder_outline p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }
#outline table{ margin: 5px 0 0 60px; width: 600px; }
table .leftTd{ width: 80px; height: 30px; font-size: 14px; }
table .rightTd{ width: 400px; height: 30px; font-size: 14px; }
.mapLink{ position: absolute; width: 100px; height: 17px; line-height: 17px; background-color: #65060c; border-radius: 2px; top: 218px; left: 470px; text-align: center; }
.mapLink a{ display: block; color: #fff; }
.mapLink a:hover{ display: block; color: rgb(238,141,152); }
.mapLink:hover{ background-color: #2e0c09; }

.goodsLink{ position: absolute; width: 100px; height: 17px; line-height: 17px; background-color: #65060c; border-radius: 2px; top: 377px; left: 390px; text-align: center; }
.goodsLink:hover{ background-color: #2e0c09; }
.goodsLink a{ display: block; color: #fff; }
.goodsLink a:hover{ display: block; color: rgb(238,141,152); }

/* ------▼#history----------------------------------------------------------------------------------------------------------- */
#history{ width: 775px; height: 270px; position: relative; }
#history .titleBorder_history{ width: 700px; height: 22px; border-radius: 3px; background-image: url(./img/titleBar_c4.jpg); margin: 10px 0 0 30px; padding-top: 3px;}
#history .titleBorder_history p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }
#history table{ margin: 20px 0 0 60px; width: 600px; }
#history table .leftTd{ width: 190px; height: 40px; font-size: 14px; }
#history table .rightTd{ width: 400px; height: 40px; font-size: 14px; }

#histryBar{ width: 700px; margin: 20px 0 20px 30px; border-radius: border: 1px solid #fff; }
#histryBar a{ display: block; }
#histryBar img{ border-radius: 5px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 0.2s ease; }
#histryBar img:hover{ 
	 -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

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

#map_canvas{ margin: 20px 0 0 50px; }

#mapInfo{ margin: 15px 0 0 50px; }
#mapInfo p{ 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; }