@charset "utf-8";

body {
  font-family:"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
  background:#fbf6ea url(../image/header_img.png) repeat-x center top;
}

#container{
  width:888px;
  margin: 0 auto;
  padding:120px 0 0;
  text-align: center;
  color:#e66900;
  font-weight: bold;
}
p{
  line-height:1.5;
}
ul li{
  list-style: none;
}
a:link {
  color: #e66900;
  text-decoration: none;
}
a:visited {
  color: #e66900;
  text-decoration: none;
}
a:hover {
  color: #e66900;
  text-decoration: none;
}
a:active {
  color: #e66900;
  text-decoration: none;
}



/* ------------------------------------
    headerArea
--------------------------------------*/
#header h1{
  margin-bottom: 40px;
}
#header h1 img{
  width:330px;
  height:70px;
}
#navi{
  width:888px;
  margin-bottom: 30px;
  background:url(../image/navi_bg.png) no-repeat center center;
}
#navi ul{
  width:860px;
  margin:0 auto;
}
#navi ul li{
  width: 20%;
  padding: 5px 0;
  font-size:20px;
  font-weight:bold;
  text-align: center;
  line-height: 0.7;
  float:left;
}


/*新規追加分*/
#navi ul li a{
  position: relative;
}

/*#navi ul li a:hover{
  position: relative;
  bottom:5px;
}*/


ul#siteLink{
  margin-bottom: 10%;
}
ul#siteLink li{
  width: 50%;
  float:left;
}
ul#siteLink li img{
  width: 100%;
  margin-bottom: 5px;
}
ul#siteLink li p{
  padding:10px 0 0;
  font-size:20px;
}
ul#siteLink li .icon{
  width:21px;
  height: auto;
  margin-right:5px;
  vertical-align: bottom;
}
ul#siteLink li.pika a{
  border-bottom: 1px solid #e66900;
}
ul#siteLink li.kira a{
  border-bottom: 1px solid #601986;
  color: #601986;
}
ul#siteLink li.pika a:hover,
ul#siteLink li.kira a:hover{
  border-bottom:none;
}




/* ------------------------------------
    main contents
--------------------------------------*/
.contBox{
  border-top: 3px solid #e66900;
  margin-bottom: 70px;
  text-align: left;
}
.contBox h2{
  padding:20px 0 20px 30px;
  font-size: 25px;
  background:url(../image/icon1.png) no-repeat left center;
  -moz-background-size:22px 22px;
  -webkit-background-size:22px 22px;
  -o-background-size:22px 22px;
  -ms-background-size:22px 22px;
  background-size:22px 22px;
  float:left;
}
.contBox .cont{
  width:600px;
  float:right;
}
.contBox .cont p{
  line-height: 1.8;
}
.contBox .cont p.copy{
  padding-top: 12px;
  font-size: 25px;
  line-height: 1.6;
}



/* --  message --*/
#message{
  position: relative;
}
#message .cont{
  padding-top:20px;
}
#message .cont img{
  width:246px;
  height:340px;
  position: absolute;
  top: 8%;left :0;
}
#message .cont p.name{
  padding-top: 15px;
  font-size: 25px;
  text-align: right;
}
#message #history{
  margin-top: 20px;
  background:url(../image/dot.png) left top;
  padding:3px;
}
#message #history .title{
  font-size:20px;
  padding:5px 10px;
  background:#fcf0e5;
}
#message #history .title2{
  margin-top: 3px;
  font-size:20px;
  padding:5px 10px;
  background:#fcf0e5;
}
#message #history table{
  width:100%;
}
#message #history th{
  width:15%;
  padding:10px;
  background:#fff;
  border-top: 1px solid #f7d2b2;
  border-right: 1px solid #f7d2b2;
  font-size:18px;
  vertical-align: top;
}
#message #history td{
  padding:10px;
  background:#fff;
  border-top: 1px solid #f7d2b2;
  font-size:14px;
  line-height: 1.5;
}


/* --  objective --*/
#objective p.copy{
  padding-bottom: 20px;
}


/* --  company --*/
#company.contBox{;
  margin-bottom: 140px;
}
#company table{
  width:100%;
  margin-top: 15px;
}
#company tr{
  border-bottom: 1px dashed #eb8c3b;
}
#company th{
  width:20%;
  padding:12px 0;
  vertical-align: top;
  line-height: 1.5;
}
#company td{
  padding:12px 0;
  line-height: 1.5;
}
#company tr:last-child{
  border-bottom:none;
}


/* ------------------------------------
    headerArea
--------------------------------------*/
#footerArea{
  background: #FFF;
  padding: 110px 0 80px;
  color:#e66900;
  font-weight: bold;
}
#footer{
  width:888px;
  margin: 0 auto;
}

/* --inquiry  --*/
#inquiry{
  width:884px;
  margin-top: -22%;
  position: relative;
}
#inquiry .mail{
  position: absolute;
  top:96px;left:389px;
}
#telBox{
  position: absolute;
  z-index: 100;
  top:28px;
  left:386px;
}

#footer ul.comp{
  margin-top: 30px;
}
#footer ul.comp li{
  list-style-type: none;
  float:left;
}
#footer ul.comp li.name img{
  width:260px;
  height:35px;
  margin-right: 20px;
}
#footer ul.comp li.add{
  line-height: 1.2;
}

#footer .copyright{
  margin-top: 25px;
  padding-top:15px;
  border-top: 1px dotted #eb8c3b;
  font-size: 14px;
}

.sp{
  display: none;
}

/*--------------------------------------
  clear
--------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}







/*==================================================
  481px - 890px
===================================================*/

@media screen and (max-width: 890px){
body {
  -moz-background-size:80% auto;
  -webkit-background-size:80% auto;
  -o-background-size:80% auto;
  -ms-background-size:80% auto;
  background-size:80% auto;
}
#container { 
  width: 98%;
  padding:14% 0 0;
}
#navi{
  width: 98%;
  margin-bottom: 5%;
  background:none;
}
#navi ul{
  width: 100%;
  margin:0 auto;
}
#navi ul li{
  width: 19%;
  line-height: 1.2;
}
#navi ul li:last-child{
  width: 24%;
}
.contBox{
  margin-bottom: 12%;
}
.contBox h2{
  padding:3% 0 3% 30px;
}
.contBox .cont{
  width:98%;
  float:right;
}
.contBox .cont p.copy{
  padding-top: 2%;
}
#message .cont img{
  position: static;
  float: left;
  padding:0 2% 2% 0;
}
#company.contBox{;
  margin-bottom: 5%;
}
#footerArea{
  background: #FFF;
  padding: 0 0 5%;
}
#footer{
  width:98%;
  margin: 0 auto;
}
/* --inquiry  --*/
#inquiry{
  width:100%;
  margin-top:0;
  position: relative;
}
#inquiry img{
  width:100%;
}
img#telBox{
  width: 50%;
  height:50%;
  position: absolute;
  z-index: 100;
  top:12%;
  left:43%;
}
#inquiry .mail{
  position: absolute;
  top:68%;
  left:43%;
}
#inquiry .mail img{
  width: 90%;
}

#footer ul.comp{
  margin-top: 30px;
}
#footer ul.comp li{
  list-style-type: none;
  float:left;
}
#footer ul.comp li.name img{
  width:260px;
  height:35px;
  margin-right: 20px;
}
#footer ul.comp li.add{
  line-height: 1.2;
}

#footer .copyright{
  margin-top: 25px;
  padding-top:15px;
  border-top: 1px dotted #eb8c3b;
  font-size: 14px;
}
.txtbr{
  display:inline-block;
}

}

@media screen and (max-width: 640px){
ul#siteLink li p{
  padding:10px 0 0;
  font-size:15px;
}
ul#siteLink li .icon{
  width:14px;
  height: auto;
  margin-right:4px;
  vertical-align: bottom;
}
.sp{
  display: block;
}
}
@media screen and (max-width: 600px){
.txtbr{
  display:block;
}
}



/*==================================================
  - 480px
===================================================*/

@media screen and (max-width: 480px){
body {
  font-size:16px;
  line-height: 1.2;
}
#header h1{
  margin-bottom: 7%;
}
#header h1 img{
  width:90%;
  height:auto;
}
#navi ul li{
  font-size:17px;
}
.contBox h2{
  float: none;
  font-size: 22px;
  padding:3% 0 3% 28px;
}
.contBox .cont{
  width:97%;
  padding:0;
  margin: 0 auto;
  float: none;
}
.contBox .cont p{
  line-height: 1.5;
}
.contBox .cont p.copy{
  font-size: 18px;
  line-height: 1.5;
}
#message .cont img{
  width:50%;
  height:auto;
}
#message .cont p.name{
  padding-top: 10px;
  font-size: 20px;
}
#message #history{
  background:none;
  padding:0;
}
#message #history .title{
  font-size:18px;
  padding:5px;
  background:#fcf0e5;
  border-top: 1px solid #f7d2b2;
  border-left: 1px solid #f7d2b2;
  border-right: 1px solid #f7d2b2;
}
#message #history .title2{
  font-size:18px;
  padding:5px;
  margin-top: 0;
  background:#fcf0e5;
  border-left: 1px solid #f7d2b2;
  border-right: 1px solid #f7d2b2;
}
#message #history th{
  width:20%;
  padding:5px;
  border: 1px solid #f7d2b2;
  font-size:14px;
}
#message #history td{
  padding:5px;
  border: 1px solid #f7d2b2;
}
#company table{
  margin-top: 5px;
  font-size:14px;
}
#company th{
  width:26%;
  padding:12px 0;
  vertical-align: top;
  line-height: 1.5;
}
#footer ul.comp{
  margin-top: 20px;
}
#footer ul.comp li{
  float:none;
}
#footer ul.comp li.name img{
  width:50%;
  height:auto;
  margin:0 0 5px;
}
#footer ul.comp li.add{
  font-size:12px;
  line-height: 1.2;
}

#footer .copyright{
  margin-top: 15px;
  padding-top:10px;
  border-top: 1px dotted #eb8c3b;
  font-size: 12px;
}


}