@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 会社概要 ◇◆◇
  
  
========================================================================================================================*/

#hd { background-image:url(../image/pdHd_bg.jpg); }
#pgHd h2:before { content:url(../image/pdHd_icon.png); }


/*----------------------------------------------------------------------------------------------------

  職人
  
----------------------------------------------------------------------------------------------------*/

.syokunin_block {
  width:50%;
  height:400px;
  float:left;
  color:#fff;
  position:relative;
  background-color:#464678;
}

#syokunin02 { background:url(../../image/bg2-purple.gif) repeat left top; }

.syokunin__dai {
  width:196px;
  height:110px;
  position:absolute;
  top:60px;
}

#syokunin01 .syokunin__dai { right:354px; }
#syokunin02 .syokunin__dai { left:354px; }

.syokunin__dai_inner {
  width:100%;
  height:100%;
  color:#fff;
  position:relative;
  display:block;
}

.syokunin__dai_inner:before,
.syokunin__dai_inner:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:0;
}

.syokunin__dai_inner:before {
  top:0;
  border-left:98px solid transparent;
  border-right:98px solid transparent;
  border-bottom:55px solid #fff;
}

.syokunin__dai_inner:after {
  bottom:0;
  border-top:55px solid #fff;
  border-left:98px solid transparent;
  border-right:98px solid transparent;
}

.syokunin__dai_inner span {
  height:100%;
  display:inline-block;
  position:relative;
  z-index:2;
  text-align:center;
  color:#464678;
}

.syokunin__name-jp {
  letter-spacing:0.15em;
  white-space:nowrap;
  font-weight:400;
  display:inline-block;
  position:absolute;
  top:85px;
}

#syokunin01 .syokunin__name-jp { right:80px; }
#syokunin02 .syokunin__name-jp { left:115px; }

.syokunin__name-en {
  height:174px;
  letter-spacing:0.05em;
  white-space:nowrap;
  padding-right:0.5em;
  display:inline-block;
  position:absolute;
  bottom:0;
  border-right:1px solid #9090ae;
  border-right-color:rgba(255,255,255,0.4);
}

#syokunin01 .syokunin__name-en { right:150px; }
#syokunin02 .syokunin__name-en { left:80px; }

.syokunin__photo {
  position:absolute;
  bottom:0;
}

#syokunin01 .syokunin__photo { right:240px; }
#syokunin02 .syokunin__photo { left:240px; }


/*----------------------------------------------------------------------------------------------------

  メッセージ
  
----------------------------------------------------------------------------------------------------*/

#message { padding-bottom:80px; }

.message_block {
  width:910px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  box-sizing:border-box;
}

.message_block p {
  vertical-align:top;
  float:right;
  margin-right:2em;
}

.message_block p:first-child { margin-right:0; }

.message_block#top {
  margin-top:80px;
  height:490px;
}

.message_block#top .photo {
  position:absolute;
  right:-128px;
  top:0;
}

.message_block#top:after {
  content:"";
  width:286px;
  height:368px;
  display:inline-block;
  background:url(../image/mess_img.png) no-repeat left top;
  position:absolute;
  left:-120px;
  bottom:0;
}

.message_block#top .txt {
  width:100%;
  position:absolute;
  right:400px;
  top:0;
}

.message_block#bottom .photo {
  position:absolute;
  left:0;
  top:0;
}


#message_blockB-warp {
  width:100%;
  position:relative;
  background:url(../../image/bg3-black.gif) repeat center top;
}

#message_blockB:after {
  content:"";
  width:50%;
  height:100%;
  display:block;
  background:url(../image/messB_photo.jpg) no-repeat 22% center;
  background-size:cover;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
}

#message_blockB {
  width:50%;
  float:left;
  color:#fff;
}

#message_blockB .txt {
  width:550px;
  float:right;
  text-align:left;
  padding-top:70px;
  padding-bottom:80px;
}

#message_blockB .txt .sbj { padding-bottom:30px; font-weight:400; }
#message_blockB .txt .l-btn { margin-top:40px; }


/*----------------------------------------------------------------------------------------------------

  概要
  
----------------------------------------------------------------------------------------------------*/

#gaiyo-warp {
  background:url(../../image/bg-gray.gif) repeat center top;
  margin-top:105px;
  padding-bottom:80px;
  position:relative;
}

#gaiyo-warp:before {
  content:"";
  width:100%;
  height:60px;
  background-color:#f5f5f5;
  position:absolute;
  left:0;
  right:0;
  top:0;
}

#gaiyo {
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

#gaiyo_ad {
  width:520px;
  float:left;
  background-color:#fff;
  padding-bottom:40px;
}

#gaiyo_ad img { margin-bottom:10px; }

#gaiyo_ad h4 {
  line-height:1.4;
  font-size:175%;
  font-weight:400;
}

#gaiyo_ad h4 span { font-size:50%; font-weight:200; }

#gaiyo_ad address { margin-top:1em; margin-bottom:1.25em; }

.gaiyo_tel { line-height:1; }

.gaiyo_tel .taiou {
  line-height:1.2;
  display:inline-block;
  border:1px solid #313131;
  padding:0.25em 0.5em 0.5em 0.5em;
  margin-left:1em;
  vertical-align:super;
}


/*-----------------------------------------------------------------------------------
  歴史
-----------------------------------------------------------------------------------*/

#gaiyo_rekishi {
  width:520px;
  float:right;
  padding-top:240px;
  position:relative;
}

#gaiyo_rekishi:before {
  content:url(../image/photo02.png);
  position:absolute;
  right:0;
  top:-25px;
}

#gaiyo_rekishi .rekishi_hd {
  float:right;
  font-weight:500;
  display:inline-block;
  margin-left:40px;
  margin-right:40px;
  margin-top:-1em;
}

#gaiyo_rekishi p { float:right; }


/*----------------------------------------------------------------------------------------------------

  地図
  
----------------------------------------------------------------------------------------------------*/

#gmap {
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-top:80px;
  padding-bottom:100px;
  position:relative;
}

#gmap iframe {
  width:100%;
  height:600px;
  vertical-align:bottom;
}