@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: 900px; 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 h4{ color: #fff; font-size: 25px; margin: 15px 0 0 50px; text-shadow: 1px 1px 3px #000; letter-spacing: 2px; }
#companyName img{ margin: 20px 0 0 50px; width: 280px; }
.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(7){ background-color: rgba(255,255,255,0.1); width: 90px; height: 50px; margin-top: 2px; }
nav ul li:nth-child(7) a{ color: #fff; font-size: 14px;  margin-top: 13px;}

/* ------▼▼▼#main   -------------------------------------------------------------------------------------------------------------------------- */
#main{ width: 1100px; height: left: auto; right :auto;  
    left: 0;
    right: 0;
    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; }
.contact_form p{ font-size: 16px; }
.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: 710px; margin-top: 15px; border-radius: 5px; background-color: rgba(255,255,255,0.65); position: relative; } 

/* ------▼#contactForm----------------------------------------------------------------------------------------------------------- */
#contactForm{ position: relative; }
.formContainer{  margin: 40px 0 0 45px; }
.formContainer h3{ font-size: 18px; margin-bottom: 8px; }
.formContainer{ font-size: 18px; }
.formTitle{ width: 700px; height: 22px; border-radius: 3px;  background-image: url(./img/titleBar_2.jpg); margin: 20px 0 0 30px; padding-top: 3px; }
.formTitle{  }
.formTitle p{ font-size: 14px; color: #fff; margin: 0 0 0 20px; }
.tableTitle p{ font-size: 14px; }
.formOne{ width: 400px; }

.textareaTitle{ margin-top: 25px; }
.submit{ position: absolute; top: 500px; left: 50px; }
.toConfirm{ display: block;  width: 150px; height: 30px; line-height: 30px; margin-top: 10px; border-radius: 4px; background-color: #451964; text-align: center; color: #fff; font-size: 16px; }
.toConfirm:hover{ background-color: rgba(69,25,100,0.75); }


/* ------▼▼▼#confirm---------------------------------------------------------------------------------------------------------- */
#confirm{ display: none; position: fixed; top: 30px; left: 250px; width: 750px; height: 530px; padding: 20px 0 0 100px; bordr: solid 1px #ccc; border-radius: 5px; background-color: rgba(255,255,255,0.9); z-index: 100;}
.confirmTitle{}
.confirmTitle h2{ font-size: 18px; }
.confirmNote{ margin-top: 20px; }
.noteUpper{}
.noteUpper h4{ font-size: 15px; margin-bottom: 8px; }
.confirmSet{ margin-bottom: 5px; width: 500px; background-color: rgba(204,204,204,0.65); }
.confirmLeftColumn{ float: left; width: 100px; height: 25px; line-height: 25px; }
.confirmLeftColumn p{ font-size: 14px; margin-left: 15px; }
.confirmRightColumn{ float: left; width: 400px; height: 25px; line-height: 25px; }
.confirmRightColumn p{ font-size: 14px; }
.clear{ clear: both;}

.noteBottom{ margin-top: 10px; }
.noteBottom  h4{ font-size: 15px;}
.noteBottom_content{ width: 600px; height: 120px; margin-bottom: 15px; overflow: auto; background-color: rgba(204,204,204,0.65); }

#confirmSubmit{ float: left; width: 120px; height: 25px; line-height: 25px; border-radius: 4px; background-color: #451964; }
#confirmSubmit:hover{ background-color: rgba(69,25,100,0.75); }
#confirmSubmit a{ display: block; color: #fff; text-align: center; }
#confirmSubmit a:hover{ color: rgb(238,141,152); }

#confirmRevision{  float: left; width: 120px; height: 25px; line-height: 25px; border-radius: 4px; background-color: #451964; margin-left: 10px; }
#confirmRevision:hover{ background-color: rgba(69,25,100,0.75); }
#confirmRevision a{ display: block; color: #fff; text-align: center; }
#confirmRevision a:hover{ color: rgb(238,141,152); }


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