@charset "UTF-8";
/* CSS Document */

body {
  color: #3e3a39;
  font-size: 20px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  line-height: 48px;
  text-align: center;
  overflow-wrap : break-word;
  margin: 0;
  padding: 0;

}

h2,h3,h4{text-align: left;}


a {color: #3e3a39;
  text-decoration:none;
  }
a:hover {
  color: #3e3a39;
  text-decoration:underline;
  }
img {
  margin: 0  ;
  padding: 0;
  border: none;
}

#container{
  min-width: 1110px;
  max-width: 1920px;
  width: auto;
  margin: 0 auto ;
  text-align: center;
  
}
#contents{
  width:100%;
  margin: 0 auto ;
  text-align: center;
  
}

/****************************************************************************
  コンテンツ設定
*****************************************************************************/

/*	ヘッダー
----------------------------------------------------------------------------*/
#header{
  width: 100%;
  background-color: #fff;
  padding: 9px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
}
#header2{
  display: none;
}
#header_in {
  min-width: 1110px;
  max-width: 1920px;
  width: 100%;
  margin: auto;
}
.head_logo {
  width:200px;
  margin:0 0 0 30px;
  float: left;
  }
.head_logo img {
  width: 100%;
  height: auto;
}


.h1{
  paddning: 13px 0 0 0;
  font-size: 12px;
  line-height:30px;
  height: 30px;
  text-align: center;
  color:#4d4d4d;
}

.pc{display:inline;}
.sm{display:none;}

/*	グローバルナビ
----------------------------------------------------------------------------*/

.navi{
  margin: 0 ;
  padding: 0;
}
.navi ul:before, .navi ul:after{
  content: "";
  display: table;
}
.navi ul:after{
  clear: both;
}
.navi ul {
  margin: 0;
  padding: 0;
  float: right;
  
}
.navi li{
  list-style: none;
  display: inline-block;
}
.navi li a{
  margin: 0 20px 0 0;
    padding: 22px 0 ;
  float: left;
  font-size: 16px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  background-image: url(../img/common/navi_bar.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 0% 2px;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.navi  li a:hover {
  text-decoration: none;
  background-size: 100% 2px;
}


.home .p1 a{background-size: 100% 2px;}
.concrete .navi .p2 a {background-size: 100% 2px;}
.sugiita .navi .p3 a {background-size: 100% 2px;}
.gallery .navi .p4 a {background-size: 100% 2px;}
.design .navi .p5 a {background-size: 100% 2px;}
.company .navi .p6 a {background-size: 100% 2px;}
.contact .navi .p7 a {background-size: 100% 2px;}
.mortar .navi .p8 a {background-size: 100% 2px;}

/*	グローバルナビ (スマホ用)
----------------------------------------------------------------------------*/
#category_list{
  display:none;
  
}
/*	フッター
----------------------------------------------------------------------------*/
#footer{
  padding: 0;
  text-align: center;
  margin:  0;
  }
.foot_link {
  border-top: 2px solid #3e3a39;
  border-bottom: 2px solid #3e3a39;
  margin: 74px auto;
  padding: 18px 0;
}
.foot_link.bl {
  border-top: 2px solid #3e3a39;
  border-bottom: 2px solid #3e3a39;
  margin: 0 auto;
  padding: 18px 0;
}
.footer_blog {
  width: 100%;
  background-image: url(../img/common/foot_blogback.jpg);
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  color: #FFFFFF;
}

.footer_blog_in {
  position: relative;
  width: 100%;
  padding: 60px 0;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  top: 0; 
  z-index: 2;

}

.footer_blog_in .lead {
  margin: 0 auto;
}
.footer_blog .bt {
  width: 240px;
  margin: 35px auto 0 auto;
  
}

.price_link {
  width: 100%;
  background-image: url(../img/design/img_06.png);
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  color: #FFFFFF;
}

.price_link_in {
  position: relative;
  width: 100%;
  padding: 60px 0;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  top: 0; 
  z-index: 2;

}

.price_link_in .lead {
  margin: 0 auto;
}
.price_link .bt {
  width: 240px;
  margin: 35px auto 0 auto;
  
}




.foot_link ul:before, .foot_link ul:after{
  content: "";
  display: table;
}
.foot_link ul:after{
  clear: both;
}
.foot_link ul {
  width: 100%;
}
.foot_link .mid  {
  border-right: 2px solid #3e3a39;
  border-left: 2px solid #3e3a39;
}
.foot_link li {
  width: 33%;
  padding: 15px 0 0 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  float: left;	
}
.foot_link li a::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  left:0;
}
.foot_link li a:hover::after{
  animation: anim_btn_color .5s ease forwards;
}
.foot_link li a:hover{
  cursor: pointer;
}
.foot_logo {
  width: 356px;
  margin: 0 auto 56px auto;
}
.foot_add {
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  margin: 0 auto 56px auto;
}
.foot_add .name {
  font-size: 20px;
  line-height: 1em;
  margin: 0 0 15px 0;
}
.foot_add .name img {
  margin: 3px 0 0 0.5em;
}
.foot_add .telno {
  font-size: 22px;
}

#footer_copy{
  height:60px;
  font-size:18px;
  line-height:20px;
  padding: 0;
  text-align:center;
  }
#footer .page_top{
  position: relative;
  overflow: hidden;
  margin: 0 0 60px 0 ;
}
#footer .page_top::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  left:0;
}
#footer .page_top:hover::after{
  animation: anim_btn_color .5s ease;
}
#footer .page_top:hover{
  cursor: pointer;
}


/*	共通
----------------------------------------------------------------------------*/

.center{text-align: center;}
.clear{clear: both; overflow: hidden; margin:  auto;}
.int10 {
  text-indent:-1em;
  padding-left:1em;
}

.bt_deco a {
  border: 1px solid #fff;
  padding: 18px 0;
  text-align: center; 
  text-decoration: none;
  font-size: 24px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  display: block;
  position: relative;
  overflow: hidden;
}

.bt_deco a::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.bt_deco a:hover::after{
  animation: anim_btn_color .5s ease forwards;
}
.bt_deco a:hover{
  cursor: pointer;
}


.bt_deco_pane a {
  border: 1px solid #fff;
  padding: 18px 0;
  text-align: center; 
  text-decoration: none;
  font-size: 24px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  display: block;
  position: relative;
  overflow: hidden;
  width: 50%;
  margin: auto;
}

.bt_deco_pane a::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.bt_deco_pane a:hover::after{
  animation: anim_btn_color .5s ease forwards;
}
.bt_deco_pane a:hover{
  cursor: pointer;
}





.bt_deco_pre a {
  border: 2px solid #fff;
  padding: 18px 0;
  text-align: center; 
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  display: block;
  position: relative;
  overflow: hidden;
}
.bt_deco_pre a::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.bt_deco_pre a:hover::after{
  animation: anim_btn_color .5s ease forwards;
}
.bt_deco_pre a:hover{
  cursor: pointer;
}





@keyframes anim_btn_color {
 0% {
  top:100%;
}
40% {
  top: 0;
}
60% {
  top: 0;
}
100% {
  top: 0;
} 
}

.fade-in {
  transition: opacity 2s;
  -moz-transition: opacity 2s;
  -webkit-transition: opacity 2s;
  -o-transition: opacity 2s;
}
.title {
  width: 660px;
  font-size: 40px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  text-align: center;
  padding: 15px 0;
  margin: 20px auto;
  border-bottom: 1px solid #3e3a39;
}
.lead {
  font-size: 40px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.lead_s {
  font-size: 36px;
  line-height: 45px;
  letter-spacing: -0.05em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.lead_l {
  font-size: 52px;
  line-height: 65px;
  letter-spacing: -0.05em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  margin: 0 0 20px 0;
}
.lead_l_pane {
  font-size: 48px;
  line-height: 65px;
  letter-spacing: -0.05em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  margin: 0 0 20px 0;
}
.note{font-size:80%;}

/*　TOP
----------------------------------------------------------*/
.mid_navi {
  margin: 30px auto 120px auto;
  font-size: 16px;
  line-height: 2em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

.top_title {
  width: 400px;
  margin: 80px auto 50px auto ;
}
.top_comm {
  width: 600px;
  margin: 0 auto 90px auto;
  font-size: 20px;
  line-height: 36px;
  text-align: left;
}
.top_comm_w {
  width: 900px;
  margin: 0 auto 90px auto;
  font-size: 20px;
  line-height: 36px;
  text-align: left;
}
.top_sect01 {
  width: 100%;
  height: 640px;
  overflow: hidden;
  position: relative;
  
}
.top_sect01 img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: 1;
  
}

.top_sect01_aa {
  width: 100%;
  height: 640px;
  overflow: hidden;
  position: relative;
  
}
.top_sect01_aa img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: 1;
  
}


.top_sect_in {
  position: relative;
  width: 100%;
  padding: 60px 0;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  top: 0; 
  z-index: 2;

}

.top_sect_in .lead {
  margin: 0 auto 50px auto;
}
.top_sect_in .bt {
  width: 240px;
  margin: 60px auto 0 auto;
  
}
.top_sect_in .bt_pre {
  width: 240px;
  margin: 200px auto 0 auto;
  background-color: rgba(0,0,0,0.3);
  
}

.top_sect02 {
  width: 100%;
  padding: 60px 0;
  background-color: #e3e1e5;
  margin: 80px auto 0 auto;
  
}
.top_sect03 {
  width: 100%;
  padding: 60px 0;
  background-color: #e3e1e5;
  background-image: url(../img/top/img_04_back.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 80px auto 0 auto;
  
}
.top_sect_in2 {
  width: 1360px;
  margin: auto;
}


.top_sect_in2 .img {
  width: 47%;
  height: 490px;
  margin: 0 0 0 3%;
  overflow: hidden;
  position: relative;
  float: right;
} 
.top_sect_in2 .img img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: 1;
}
.top_sect_in2 .left {
  width: 50%;
  padding: 60px 0 0 0;
  float: left;
} 
.top_sect_in2 .lead {
  margin: 0 auto 60px auto;
}
.top_sect_in2 .text {
  width: 86%;
  margin: 0 7% 60px 7%;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
} 


.top_sect_in2 .left .bt a {
  width: 240px;
  margin: 0 auto 0 auto;
  border: 2px solid #3e3a39;
  padding: 18px 0;
  text-align: center; 
  text-decoration: none;
  font-size: 24px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #3e3a39;
  background-image: url(../img/common/link_icon.png);
  background-repeat: no-repeat;
  background-position: 80% center;
  display: block;
  position: relative;
  overflow: hidden;
}
.top_sect_in2 .left .bt a::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,0.15);
  left:0;
}
.top_sect_in2 .left .bt a:hover::after{
  animation: anim_btn_color .5s ease;
}
.top_sect_in2 .left .bto a:hover{
  cursor: pointer;
}
.top_sect_in2 .name {
  font-size: 28px;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.top_sect_in2 .name span {
  font-size: 20px;
  padding-right: 1em;
}
  @media screen and ( max-width: 1359px) {
    .top_sect_in2 {
      width: 90%;
      margin: 0 5% 0 5%;
    }
    .top_sect_in2 .img img {
      position: absolute;
      min-width: 100%; 
      min-height: 100%;
      width: auto;
      height: auto;
      top: -10%; 
      left: -20%;
      z-index: 1;
    }
  }
.top_appendix{
  margin-top:40px;
  font-size:75%;
  line-height:1.5em;
}



/*　コンクリート打ち放し調/杉板浮造り調
----------------------------------------------------------*/
.sect_01 {
  width: 100%;
  height: 640px;
  position: relative;	
  
}
.sect_01_in {
  width: 50%;
  height: 640px;
  overflow: hidden;
  position: relative;
  float: left;
}
.sect_01_in img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: -1;
  
}

.sect_01_in .bt_l {
  width: 240px;
  position: absolute;
  right: 23%;
  bottom: 80px;
  z-index: 2;
}
.sect_01_in .bt_r {
  width: 240px;
  position: absolute;
  left: 23%;
  bottom: 80px;
  z-index: 2;
}
.bt_m {
  width: 240px;
  position: absolute;
  left: 50%;
  bottom: 80px;
  margin-left: -120px;
  z-index: 2;
}
.bt_m.t {
  width: 290px;
  position: absolute;
  left: 50%;
  bottom: 150px;
  margin-left: -120px;
  z-index: 2;
}
.bt_m.b {
  width: 290px;
  position: absolute;
  left: 50%;
  bottom: 50px;
  margin-left: -120px;
  z-index: 2;
}

.sect_02 {
  width: 100%;
  height: 812px;
  overflow: hidden;
  position: relative;
  
}
.sect_02 img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: -1;
  
}

.sect_03 {
  width: 100%;
  height: 1036px;
  overflow: hidden;
  position: relative;
  
}
.sect_03 img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: -1;
  
}
.sect_04 {
  width: 100%;
  height: 640px;
  overflow: hidden;
  position: relative;
  
}
.sect_04 img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: -1;
  
}


.text_wrap {
  position: absolute;
  width: 100%;
    left: 0;
  top: 0;
  z-index: 3;
}
.text_wrap .text_box {
  margin: auto;
  font-size: 18px;
  line-height: 32px;
  text-align: left;
  color: #fff;
}

.concrete_sect_01 {
  width: 650px;
  padding-top: 160px;
}
.concrete_sect_03 {
  width: 240px;
  padding-top: 617px;
}
.concrete_sect_04 {
  width: 240px;
  padding-top: 830px;
}
.sugiita_sect_01 {
  width: 450px;
  padding-top: 160px;
}
.sugiita_sect_02 {
  width: 530px;
  padding-top: 92px;
}
.sugiita_sect_03 {
  width: 530px;
  padding-top: 112px;
}
.sugiita_sect_04 {
  width: 910px;
  padding-top: 676px;
}
.concrete_cont {
  width: 100%;
  background-color: #e0dee2;
  background-image: url(../img/concrete/cont_back.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  padding: 200px 0 50px 0;
}
.sugiita_cont {
  width: 100%;
  background-color: #e0dee2;
  background-image: url(../img/sugiita/cont_back.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  padding: 200px 0 50px 0;
}
.cont_in {
  width: 1260px;
  margin: auto;
}
.cont_in .top_text {
  width: 520px;
  padding: 0 20px 0 720px;
  margin: 0 0 80px 0;
  font-size: 18px;
  line-height: 32px;
  text-align: left;
}
.cont_in .top_text .lead {
  margin: 0 0 20px 0;
  
}
.cont_in .img_title {
  width: 1186px;
  font-size: 40px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  text-align: center;
  padding: 15px 0;
  margin: 40px auto;
  border-bottom: 1px solid #3e3a39;
}
.cont_contact {
  width: 910px;
  margin: 0 auto 70px auto;
}
.cont_contact table {
  border-collapse: separate;
   border-spacing: 10px 15px;
  width:100%;
  }
.cont_contact th {
  width:190px;
  padding: 0px 10px 0px 10px;
  font-size:18px;
  text-align:left;
  vertical-align:top;
  background-color: #e0dee2;
  }
.cont_contact td {
  padding: 0 0 0 0;
  text-align:left;
  }
.cont_contact .comm {
  width: 650px;
  margin: auto;
  font-size: 18px;
  line-height: 29px;
  text-align: left;
}

.sugi_img22 {
  margin: 20px auto;
}
.sugi_img23 {
  margin: 10px auto;
}
.sugi_img32 {
  margin: 10px auto 0px;
}
.sugi_img32_a {
  text-align: right;
  font-size: 14px;
  margin-right: 10px;
}

.sugi_reia{
  width:70%;
  margin:auto;
}
.sugi_reia li{
  float:left;
  width:50%;
  margin:2.5% 0;
  text-align:center;
}
.sugi_reia li img{
  max-width:350px;
  height:auto;
}

.sugi_reia_b{
  width:90%;
  margin:auto;
}
.sugi_reia_b li{
  float:left;
  width:33%;
  margin:2.5% 0;
  text-align:center;
}
.sugi_reia_b li img{
  max-width:350px;
  height:auto;
}

.sugi_reia_mi{
  width:100%;
  margin:auto;
}
.sugi_reia_mi li{
  float:left;
  width:33%;
  margin:2.5% 0;
  text-align:center;
  font-size: 16px;
}
.sugi_reia_mi li img{
  max-width:280px;
  height:auto;
}

.sugi_reia_mib{
  width:70%;
  margin:auto;
}
.sugi_reia_mib li{
  float:left;
  width:50%;
  margin:2.5% 0;
  text-align:center;
  font-size: 16px;
}
.sugi_reia_mib li img{
  max-width:280px;
  height:auto;
}



.sugi_pane{
  width:90%;
  margin:auto;
}
.sugi_pane li{
  float:left;
  width:50%;
  margin:2.5% 0;
  text-align:center;
}
.sugi_pane li img{
  max-width:400px;
  height:auto;
}


.contents_a {
     width: 100%;
     max-width: 1200px;
     margin: auto;
  line-height: 35px;
 }
 .contents_a img {
     width: 100%;
 }
 .text-center {
     text-align: center;
 }
 .flexbox {
     display: flex;
 }
 .box1 {
     width: 30%;
     margin: auto;
 }
 .box2 {
     width: 30%;
     margin: auto;
 }
 .box3 {
     width: 30%;
     margin-left: 20px;
 }

 

 @media screen and (max-width: 767px) {
   
.contents_a {
  line-height: 20px;
 }	 
   
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 80%;
         margin: 10px auto;
     max-width: 350px;
     }
     .flexbox .box2 {
         width: 80%;
         margin: 10px auto;
     max-width: 350px;
     }
   .flexbox .box3 {
         width: 80%;
         margin: 10px auto;
     max-width: 350px;
     }
 }



/*　gallery
----------------------------------------------------------*/

.page_title {
  width: 660px;
  font-size: 40px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  text-align: center;
  padding: 15px 0;
  margin: 0 auto 30px auto;
  border-bottom: 1px solid #fff;
  color: #fff;
}
.page_comm {
  width: 660px;
  margin: auto;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
}
.page_comm.pane {
  width: 800px;
  margin: auto;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
}
.gallery .head_img {
  padding: 40px 0;
  background-image: url(../img/gallery/head_img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  
}
.gallery_tab {
  width: 710px;
  margin: 500px auto ;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 35px 0;
}
.gallery_tab .bt {
  width: 326px;
  margin: 0 auto;
}

.gallery_tab_pane {
  width: 910px;
  margin: 500px auto ;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 35px 0;
}
.gallery_tab_pene .bt {
  width: 326px;
  margin: 0 auto;
}

.gallery_sect_01 {
  background-image: url(../img/gallery/img_01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  overflow: hidden;
}
.gallery_sect_02 {
  background-image: url(../img/gallery/img_02.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  overflow: hidden;
}
.gallery_sect_03 {
  background-image: url(../img/gallery/img_05.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  overflow: hidden;
}

/******************ビフォー　アフター****************************/

.gallery_sect_02 {}
.gallery_sect_02{overflow-x: hidden;}

.gallery_inline_wrap {
  display: none;
  overflow-x: hidden;
  position: relative;
}


.gallery_inline {
  width: 800px;
  margin: auto;
  font-size: 13px;
  line-height: 24px;
  color: #fff;
}

.gallery_inline .img {
  width: 490px;
  margin: 100px auto;
  position: relative;
}

.gallery_inline .imgs {
  width: 800px;
  margin: 100px auto;
  position: relative;
}



.gallery_inline .img_sub {
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  top:-60px;
  left: -40px;
  z-index: 2;
  display: none;
  
}
.gallery_inline .img_sub img {
  -webkit-box-shadow: #000 10px 10px 5px;
  -moz-box-shadow: #000 10px 10px 5px;
  box-shadow: #000 10px 10px 5px;
}
.gallery_bt {
  border: 1px solid #fff;
  padding: 18px 0;
  text-align: center; 
  text-decoration: none;
  font-size: 24px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  display: block;
  width: 70%;
  position: absolute;
  bottom: 44px;
  left: 15%;
  z-index: 3;
  overflow: hidden;
}
.gallery_bt::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.gallery_bt:hover::after{
  animation: anim_btn_color2 .3s ease forwards;
}
.gallery_bt:hover + .img_sub {
  animation: anim_btn_img 1.5s ease forwards;
  display: block;
}
@keyframes anim_btn_color2 {
 0% {
  top:100%;
}
100% {
  top: 0;
} 
}
@keyframes anim_btn_img {
 0% {
  opacity: 0;
}
100% {
  opacity: 1;
} 
}



/*　gallery-2  リニューアル　2020.7
----------------------------------------------------------*/
.g-ttl{
  width: 100%;
  text-align: center;
  padding: 150px 0;
  color: #fff;
  margin-top: 20px;
}
.bg-sec01{background: url(../img/gallery2/bg_ttl01.jpg) center top no-repeat;}
.bg-sec02{background: url(../img/gallery2/bg_ttl02.jpg) center top no-repeat;}
.bg-sec03{background: url(../img/gallery2/bg_ttl03.jpg) center top no-repeat;}

.g-list{
  width: 100%;
  margin-top: 3px;
  margin-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.g-list li{
  width: 24.75%;
  height: 19vw;
  margin-bottom: 0.25%;
  overflow: hidden;
  position: relative;
}
.g-list li a{display: block;}
.g-list li img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 130%;
  transition: 0.2s;
}
.g-list li a:hover img{
  height: 120%;
  width: auto;
}
.g-list .name{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 94%;
  padding: 3%;
  background: url(../img/gallery/bg_name.png);
  color: #fff;
  font-size: 75%;
  line-height: 1.2em;
  text-align: left;
}

    @media screen and (max-width: 767px) {
        .g-ttl{
          padding: 50px 0;
        }
        .bg-sec01,
        .bg-sec02,
        .bg-sec03{ background-size: cover;}
        .g-list{
          margin-bottom: 30px;
        }
        .g-list li{
          width: 49.75%;
          height: 35vw;
        }
        .g-list li.sub{display: none;}
        .g-list .name{
          font-size: 13px;
          line-height: 1.2em;
        }
          
    }







































  
/*　設計事務所様へ
----------------------------------------------------------*/
.design .head_img {
  padding: 160px 0;
  background-image: url(../img/design/head_img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  
}

.design .text_wrap {
  position: absolute;
  width: 100%;
    left: 0;
  top: 30%;
  z-index: 3;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
}
.design .text_wrap.a {
  position: absolute;
  width: 100%;
    left: 0;
  top: 15%;
  z-index: 3;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
}

.design .wrap {
  height: 640px;
  position: relative;
}

.design .text_wrap_pane {
  position: absolute;
  width: 100%;
    left: 0;
  top: 30%;
  z-index: 3;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,0.3);
}
.design .text_wrap_pene.a {
  position: absolute;
  width: 100%;
    left: 0;
  top: 15%;
  z-index: 3;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #fff;
}

.design .wrap_pene {
  height: 640px;
  position: relative;
}



/*　会社概要
----------------------------------------------------------*/
/*.company #contents {
  background-image: url(../img/company/img_01.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding: 0 0 5px 0;
}*/

.map_title {
  background-image: url(../img/company/arrow.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding-bottom: 1px;
}
.comp_table {
  width: 1070px;
  margin: 0 auto 70px auto;
}
.comp_table table {
  border-collapse: separate;
   border-spacing: 10px 15px;
  width:100%;
  }
.comp_table th {
  width:140px;
  padding: 10px 60px;
  font-size:20px;
  text-align:left;
  background-color: #e3e1e5;
  
  }
.comp_table td {
  font-size: 18px;
  line-height: 36px;
  padding: 10px 0 10px 60px;
  text-align:left;
  
  }
.comp_map {
  width: 100%;
  height: 590px;
  margin: 5px auto 30px auto;
}

.hyouka_a{
  width:100%;
  max-width:1070px;
  margin:auto;
  font-size:90%;
  line-height:1.4em;
}
.news01{
  width:80%;
  margin:auto;
}
.news01 li{
  float:left;
  width:50%;
  margin:2.5% 0;
  text-align:center;
}
.news01 li img{
  max-width:350px;
  height:auto;
  border:solid 1px #999999;
  box-sizing:border-box;
}

.news_img{
  width:100%;
  max-width:500px;
  margin:20px auto;
  text-align:center;
}
.news_img img{
  max-width:90%;
  height:auto;
  border:solid 1px #999999;
  box-sizing:border-box;
}



/*　お問い合わせ
----------------------------------------------------------*/
.head_toi{padding-top:160px;}

.contact #contents {
  background-image: url(../img/contact/back.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
.contact_tel {
  width: 660px;
  margin: 30px auto;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}
.contact_name {
  font-size: 30px;
  text-align: center;
  margin: auto;
  color:#fff;

}
.contact_time {
  width: 470px;
  margin: 0 auto 50px auto;
  padding: 0 0 0 190px;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
  color:#fff;
  }
.contact_table .comm {
  width: 660px;
  margin: 30px auto;
  font-size: 18px;
  line-height: 29px;
  text-align: left;
}
.contact_table {
  padding:0;
  margin:30px auto 0;
  padding: 50px 0;
  color: #fff;
  }
.contact_table table {
  width:890px;
  margin: auto;
  }
.contact_table th {
  width:205px;
  padding: 9px 0 9px 0;
  font-size:18px;
  text-align:left;
  vertical-align:top;
  }
.contact_table td {
  padding: 9px 0 9px 0;
  text-align:left;
  }
.submit_btn{
  width: 288px;
  margin: 36px auto 36px auto;
  font-size: 22px;
  line-height: 1em;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  background-color: #cf0000;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
}
.submit_btn.a{
  width: 500px;
  margin: 36px auto 36px auto;
  font-size: 22px;
  line-height: 1em;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  background-color: #303030;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
}
.submit_btn.b{
  width: 500px;
  margin: 20px auto 36px auto;
  font-size: 22px;
  line-height: 1em;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  background-color: #303030;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
}


.submit_btn::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.submit_btn:hover::after{
  animation: anim_btn_color .5s ease;
}
.submit_btn:hover{
  cursor: pointer;
}

.return_btn{
  width: 288px;
  margin: 36px auto 36px auto;
  font-size: 22px;
  line-height: 1em;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  background-color: #cf0000;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
  }
.return_btn::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.return_btn:hover::after{
  animation: anim_btn_color .5s ease;
}
.return_btn:hover{
  cursor: pointer;
}
.confirm_btn{
  width: 288px;
  margin: 36px auto 36px auto;
  font-size: 22px;
  line-height: 1em;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  background-color: #cf0000;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
  }
.confirm_btn::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.confirm_btn:hover::after{
  animation: anim_btn_color .5s ease;
}
.confirm_btn:hover{
  cursor: pointer;
}
.form_style{
  width:96%; 
  height:auto; 
  padding:2% 2% ;
  vertical-align:middle; 
  font-size:16px; 
  
  }
.form_style_s{
  width:50%; 
  height:auto; 
  padding:2% 2% ;
  vertical-align:middle; 
  font-size:16px; 
  
  }
.form_style_tarea{
  width:96%; 
  height:160px; 
  padding:2% 2% ;
  font-size:16px; 
  
  }




.strong{font-weight:bold;}
.under{text-decoration:underline;}
.ml_1em{margin-left:1em;}










@media screen and ( max-width: 1500px) {
  
.sugi_reia_b{
  width:75%;
  margin:auto;
}
.sugi_reia_b li{
  float:left;
  width:30%;
  margin:2.5% 0;
  text-align:center;
}
.sugi_reia_b li img{
  max-width:300px;
  height:auto;
}	

}


























/* ===========横幅767px以下================ */


@media screen and ( max-width: 767px) {
  
  /****************************************************************************
  body設定
*****************************************************************************/
body{
  color: #000;
  font-size: 20px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  line-height: 48px;
  text-align: center;
  overflow-wrap : break-word;
  -webkit-text-size-adjust: 100%;
   
}


h2,h3,h4{text-align: left;}

a {color: #000;
  text-decoration:none;
  }
a:hover {
  color: #000;
  text-decoration:underline;
  }
img {
  margin: 0  ;
  padding: 0;
  width: 100%;
  height: auto;}

#container{
  min-width: 100%;
  max-width: 100%;
  width: auto;
  margin: 0 auto ;
  text-align: center;
  
}
#contents{
  width:100%;
  
  margin: 0 auto ;
  text-align: center;
  
}
  
/****************************************************************************
  コンテンツ設定
*****************************************************************************/

/*	ヘッダー
----------------------------------------------------------------------------*/
#header{
  display: none;
  width: 100%;
  margin: auto;
  padding:  0;
  
}
#header2{
  width: 100%;
  margin: auto;
  padding:  0;
  display: block;
  
}
#header_in {
  display: none;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  margin: auto;
}
.head_logo {
  width:40%;
  margin: 1% 18% 0 2% ;
  text-align: left;
  }


.h1{display: none;
  paddning: 13px 0 0 0;
  font-size: 12px;
  line-height:15px;
  height: 30px;
  text-align: left;
  color:#4d4d4d;
}
.list_close {
  width:12.5%;
  margin:0 ;
  float:right;
  z-index:1000;
  }
.open_menu {
  width:12.5%;
  margin:0 ;
  float:right;
  z-index:1000;
  }


.pc {display:none;}
.sm {display:inline;}
.sm_pt15{padding-bottom:15px;}



/*	グローバルナビ
----------------------------------------------------------------------------*/

.navi{
  display:none;
}

/*	グローバルナビ(スマホ用)
----------------------------------------------------------------------------*/
#category_list{
  display:none;
  width:100%;
   position:absolute;
  z-index:999;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  
}
#category_list > ul {
  margin-top: 12.5%;
  width:100%; 
  background-color:#eee;
  }
#category_list li a{
  font-size:20px;
  line-height: 40px;
  font-weight:bold;
  text-decoration:none;
  color:#000;
  background-image:url(img/common/icon.png);
  background-repeat:no-repeat;
  background-position:95%;
  
  text-align:left;
  padding-left:5%;
  padding-top:4%;
  padding-bottom:4%;
  border-bottom:1px solid #000;
  display:block;
  }
#category_list li a:hover {
  background-color:#c2c2c2;
  text-decoration:none;
}

/*	フッター
----------------------------------------------------------------------------*/
#footer{
  padding: 0;
  text-align: center;
  margin:  0;
  }

.foot_link {
  border-top: 1px solid #3e3a39;
  border-bottom: 1px solid #3e3a39;
  margin: 8% auto;
  padding: 0 0;
}
foot_link.bl {
  border-top: 1px solid #3e3a39;
  border-bottom: 1px solid #3e3a39;
  margin: 0 auto;
  padding: 0 0;
}
  
.footer_blog_in {
  position: relative;
  width: 90%;
  padding: 6% 5%;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  top: 0; 
  z-index: 2;

}
.footer_blog_in .lead {
  
  margin: 0 auto 2% auto;
}
.footer_blog_in .bt {
  width: 60%;
  margin: 6% 15% 0 15%;
  padding: 3% 5%;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}	

.price_link_in {
  position: relative;
  width: 90%;
  padding: 6% 5%;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  top: 0; 
  z-index: 2;

}
.price_link_in .lead {
  
  margin: 0 auto 2% auto;
}
.price_link_in .bt {
  width: 60%;
  margin: 6% 15% 0 15%;
  padding: 3% 5%;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}		
  
  
.foot_link ul:before, .foot_link ul:after{
  content: "";
  display: table;
}
.foot_link ul:after{
  clear: both;
}
.foot_link ul {
  width: 100%;
}
.foot_link .mid  {
  border-right: none;
  border-left: none;
  border-top: 1px solid #3e3a39;
  border-bottom: 1px solid #3e3a39;
}
.foot_link li {
  width: 50%;
  padding: 5% 25% 0 25%;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  float: left;	
}
.foot_link li::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  left:0;
}
.foot_link li:hover::after{
  animation: anim_btn_color .5s ease;
}
.foot_link li:hover{
  cursor: pointer;
}
.foot_logo {
  width: 70%;
  margin: 0 15% 5% 15%;
}
.foot_add {
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  margin: 0 auto 5% auto;
}
.foot_add .name {
  font-size: 18px;
  line-height: 1em;
  margin: 0 0 2% 0;
}
.foot_add .name img {
  height: 15px;
  width: auto;
  margin: 3px 0 0 0.5em;
}
.foot_add .telno {
  font-size: 18px;
}

#footer_copy{
  height:40px;
  font-size:18px;
  line-height:20px;
  padding: 0;
  text-align:center;
  }
#footer .page_top{
  position: fixed;
  overflow: hidden;
  margin: 0 0 0 0;
  width: 15%;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: rgba(255,255,255,0.3);
  bottom: 20px;
  right: 2%;
  z-index: 300;
}
#footer .page_top img {
  width: 90%;
  height: auto;
  margin: 5%;
  }

/*	共通
----------------------------------------------------------------------------*/

.bt_deco a{
  margin: auto;
  border: 1px solid #fff;
  padding: 3% 5%;
  text-align: center; 
  text-decoration: none;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  position: relative;
  overflow: hidden;
}
  
.bt_deco_pane a{
  margin: auto;
  border: 1px solid #fff;
  padding: 3% 5%;
  text-align: center; 
  text-decoration: none;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  position: relative;
  overflow: hidden;
}	
  

.bt_deco_pre a{
  margin: auto;
  border: 1px solid #fff;
  padding: 3% 5%;
  text-align: center; 
  text-decoration: none;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  position: relative;
  overflow: hidden;
}
  
.title {
  width: 80%;
  font-size: 20px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  text-align: center;
  padding: 15px 0;
  margin: 4% 10%;
  border-bottom: 1px solid #3e3a39;
}
.lead {
  font-size: 20px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

.lead_s {
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.05em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.lead_l {
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -0.05em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  margin: 0 0 20px 0;
}
.lead_l_pane {
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -0.05em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  margin: 0 0 20px 0;
}	
/*　TOP
----------------------------------------------------------*/
.mid_navi {
  display: none;
  margin: 30px auto 120px auto;
  font-size: 16px;
  line-height: 2em;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

.top_title {
  width: 70%;
  margin: 5% 15% ;
}
.top_comm_w, 
.top_comm {
  width: 80%;
  margin: 10% 10% 10% 10%;
  font-size: 16px;
  line-height: 26px;
  text-align: left;
}
.top_sect01 {
  width: 100%;
  height: auto;
  padding: 5% 0;
  overflow: hidden;
  position: relative;
  
}
.top_sect01 img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: 1;
  
}
  
.top_sect01_aa {
  width: 100%;
  height: auto;
  padding: 5% 0;
  overflow: hidden;
  position: relative;
  
}
.top_sect01_aa img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: auto;
  top: 0; 
  left: 0;
    z-index: 1;
  
}	
  
.top_sect_in {
  position: relative;
  width: 90%;
  padding: 6% 5%;
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  color: #fff;
  top: 0; 
  z-index: 2;

}
.top_sect_in .lead {
  
  margin: 0 auto 5% auto;
}
.top_sect_in .bt {
  width: 60%;
  margin: 6% 15% 0 15%;
  padding: 3% 5%;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

.top_sect_in .bt_pre {
  width: 60%;
  margin: 6% 15% 0 15%;
  padding: 3% 5%;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}	
  
.top_sect02 {
  width: 100%;
  padding: 6% 0;
  background-color: #e3e1e5;
  margin: 8% auto 0 auto;
  
}
.top_sect03 {
  width: 100%;
  padding: 6% 0;
  background-color: #e3e1e5;
  background-image: url(../img/top/img_04_back.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 8% auto 0 auto;
  
}
.top_sect_in2 {
  width: 96%;
  margin: 0 2%;
}


.top_sect_in2 .img {
  text-align:center;
  width:100%;
  height: auto;
/*	overflow: hidden; */
/*	position: relative; */
/*	float: right; */
/*	background-image: url(../img/top/img_03.png); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%; */
} 
.top_sect_in2 .img img {
  width: auto;
  max-width:100%;
  height: auto;
  position:static;
  min-height:auto;
  min-width:auto;
  /* position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: 100%;
  top: 0; 
  left: -15%;
    z-index: 1; */
}
.top_sect_in2 .left {
  width: 100%;
  padding: 6% 0 0 0;
  float: left;
} 
.top_sect_in2 .lead {
  margin: 0 auto 6% auto;
}
.top_sect_in2 .text {
  width: 86%;
  margin: 0 7% 6% 7%;
  font-size: 18px;
  line-height: 32px;
  text-align: left;
} 
.top_sect_in2 .left .bt a{
  width: 60%;
  margin: 6% 15% 0 15%;
  padding: 3% 5%;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  background-image: url(../img/common/link_icon.png);
  background-repeat: no-repeat;
  background-position: 80% center;
  border: 2px solid #3e3a39;
  
}

.top_sect_in2 .name {
  font-size: 22px;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.top_sect_in2 .name span {
  font-size: 18px;
  padding-right: 1em;
}
.top_appendix{
  text-align:left;
}


/*　コンクリート打ち放し調/杉板浮造り調
----------------------------------------------------------*/

.sect_01 {
  width: 100%;
  height: auto;
  position: relative;	
  
}
.sect_01_in {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  float: left;
  margin: 0 0 5% 0;
}
.sect_01_in img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: 100%;
    height: auto;
  top: 0; 
  left: 0;
  margin: 0 0 0 0;
    z-index: -1;
  
}
.sect_01_in .bt_l {
  width: 80%;
  position: absolute;
  right: 10%;
  bottom: 12%;
  z-index: 2;
}
.sect_01_in .bt_r {
  width: 80%;
  position: absolute;
  left: 10%;
  bottom: 12%;
  z-index: 2;
}

.sect_02 {
  width: 100%;
  height: 360px;
  overflow: hidden;
  position: relative;
  margin: 0 0 5% 0;
}
.sect_02 img {
  position: relative;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: 100%;
  top: 0; 
  left: 0;
    z-index: -1;
  margin: 0 0 0 0;
  
}
.bt_m {
  width: 80%;
  position: absolute;
  left: 10%;
  bottom: 8%;
  margin-left: 0;
  z-index: 2;
}
.sect_03 {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  margin: 0 0 5% 0;
}
.sect_03 img {
  position: relative;
  min-width: 100%; 
    min-height: auto;
  width: 100%;
    height: auto;
  top: 0; 
  left: 0;
    z-index: -1;
  
}
.text_wrap {
  position: relative;
  width: 100%;
    left: 0;
  top: 0;
  z-index: 3;
  margin:0 0 5% 0;
}
.text_wrap .text_box {
  margin: auto;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  color: #000;
}

.concrete_sect_01 {
  width: 80%;
  padding-top: 5%;
  
}
.concrete_sect_03 {
  width: 80%;
  padding-top: 10%;
}
.concrete_sect_04 {
  width: 80%;
  padding-top: 10%;
}
.sugiita_sect_01 {
  width: 80%;
  padding-top: 5%;
}
.sugiita_sect_02 {
  width: 80%;
  padding-top: 10%;
}
.sugiita_sect_03 {
  width: 80%;
  padding-top: 10%;
}
.sugiita_sect_04 {
  width: 80%;
  padding-top: 10%;
}
.concrete_cont {
  width: 100%;
  background-color: #e0dee2;
  background-image: url(../img/concrete/cont_back.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding: 10% 0 5% 0;
  font-size: 14px;
  line-height: 24px;
}
.sugiita_cont {
  width: 100%;
  background-color: #e0dee2;
  background-image: url(../img/sugiita/cont_back.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding: 10% 0 5% 0;
  font-size: 14px;
  line-height: 24px;
}
.cont_in {
  width: 96%;
  margin: 0 2%;
}
.cont_in .top_text {
  width: 90%;
  padding: 0 5% 0 5%;
  margin: 0 0 8% 0;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  
}
.cont_in .top_text .lead {
  margin: 20% 0 2% 0;
  
}
.cont_in .img_title {
  width: 80%;
  font-size: 20px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  text-align: center;
  padding: 2% 0;
  margin: 4% 10%;
  border-bottom: 1px solid #3e3a39;
}
.cont_contact {
  width: 90%;
  margin: 0 5% 7% 5%;
}
.cont_contact table {
  border-collapse: separate;
   border-spacing: 0 0;
  width:100%;
  }
.cont_contact th {
  width:96%;
  padding: 2% 2% 2% 2%;
  font-size:14px;
  line-height: 24px;
  text-align:left;
  vertical-align:top;
  background-color: #e0dee2;
  float: left;
  }
.cont_contact td {
  width:96%;
  padding: 2% 2% 2% 2%;
  text-align:left;
  float: left;
  font-size:14px;
  line-height: 24px;
  }
.cont_contact .comm {
  width: 90%;
  margin: 0 5%;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}
/*　gallery
----------------------------------------------------------*/

.page_title {
  width: 80%;
  font-size: 20px;
  line-height: 1.5em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  text-align: center;
  padding: 5px 0 15px 0;
  margin: 2% 10%;
  border-bottom: 1px solid #fff;
  color: #fff;
}
.page_comm {
  width: 80%;
  margin: auto;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: #fff;
}
.gallery .head_img {
  padding: 1% 0 4% 0;
  background-image: url(../img/gallery/head_img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  
}
.gallery_tab {
  width: 80%;
  margin: 50% 8% ;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 5% 2%;
}
.gallery_tab .bt {
  width: 90%;
  margin: 0 5%;
}
  
.gallery_tab_pane {
  width: 80%;
  margin: 50% 8% ;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 5% 2%;
}
.gallery_tab_pane .bt {
  width: 90%;
  margin: 0 5%;
}	
  
.gallery_sect_01 {
  background-image: url(../img/gallery/img_01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.gallery_sect_02 {
  background-image: url(../img/gallery/img_01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
/******************ビフォー　アフター****************************/
.gallery_inline {
  width: 80%;
  margin: 0 auto;
  font-size: 12px;
  line-height: 18px;
}

.gallery_inline .img {
  width: 100%;
  margin: 10% 0 30% 0;
  position: relative;
}
  .gallery_inline .img img {
    margin-bottom: 5%;
  }
.gallery_inline .img_sub {
  width: 80%;
  height: auto;
  margin: 0;
  position: absolute;
  top:10%;
  left: -5%;
  z-index: 2;
  display: none;
}

.gallery_bt {
  border: 1px solid #fff;
  padding: 3% 5%;
  text-align: center; 
  text-decoration: none;
  font-size: 18px;
  line-height: 1em;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  display: block;
  width: 70%;
  position: absolute;
  bottom: -60px;
  left: 10%;
  z-index: 3;
  overflow: hidden;
}
.gallery_bt::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.gallery_bt:hover::after{
  animation: anim_btn_color2 .3s ease forwards;
}
.gallery_bt:hover + .img_sub {
  animation: anim_btn_img 1.5s ease forwards;
  display: block;
}
@keyframes anim_btn_color2 {
 0% {
  top:100%;
}
100% {
  top: 0;
} 
}
@keyframes anim_btn_img {
 0% {
  opacity: 0;
}
100% {
  opacity: 1;
} 
}	
/*　設計事務所様へ
----------------------------------------------------------*/



.design .head_img {
  padding: 1% 0 4% 0;
  background-image: url(../img/design/head_img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  
}

.design .text_wrap {
  position: absolute;
  width: 96%;
    left: 2%;
  top: 10%;
  z-index: 3;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #fff;
  padding-bottom: 50px;
}
.design .text_wrap_pane {
  position: absolute;
  width: 96%;
    left: 2%;
  top: 10%;
  z-index: 3;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #fff;
  padding-bottom: 50px;
  background-color: rgba(0,0,0,0.5);
}	
.design .sect_01 {
  width: 100%;
  height: auto;
  position: relative;	
  
}
.design .sect_01_in {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  float: left;
  margin: 0 0 5% 0;
}
.design .sect_01_in img {
  position: absolute;
  min-width: 100%; 
    min-height: 100%;
  width: auto;
    height: 100%;
  top: 0; 
  left: 0;
  margin: 0 0 0 0;
    z-index: -1;
  
}
.design .sect_01_in .bt_l {
  width: 80%;
  position: absolute;
  right: 10%;
  bottom: 12%;
  z-index: 2;
}
.design .sect_01_in .bt_r {
  width: 80%;
  position: absolute;
  left: 10%;
  bottom: 12%;
  z-index: 2;
}

.design .wrap {
  height: 700px;
  position: relative;
}
/*　会社概要
----------------------------------------------------------*/
/*.company #contents {
  background-image: url(../img/company/img_01.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding: 1px 0 5px 0;
}*/

.map_title {
  background-image: url(../img/company/arrow.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 8% auto;
  padding-bottom: 1px;
}
.comp_table {
  width: 90%;
  margin: 0 5% 7% 5%;
}
.comp_table table {
  border-collapse: separate;
   border-spacing: 0 0;
  width:100%;
  }
.comp_table th {
  width:96%;
  padding: 2% 2%;
  font-size:14px;
  line-height: 24px;
  text-align:left;
  background-color: #e3e1e5;
  float: left;
  }
.comp_table td {
  width:96%;
  font-size: 14px;
  line-height: 24px;
  padding: 2% 2% 2% 2%;
  text-align:left;
  float: left;
  }
.comp_map {
  width: 100%;
  height: 200px;
  margin: 0 auto 3% auto;
}

.news01{
  width:100%;
}

.news01 li{
  float: none;
  width:100%;
  margin:10px 0 ;
  text-align:center;
}

.sugi_reia{
  width:100%;
}

.sugi_reia li{
  float: none;
  width:100%;
  margin:10px 0 ;
  text-align:center;
}
  
.sugi_reia_b{
  width:100%;
}

.sugi_reia_b li{
  float: none;
  width:100%;
  margin:10px 0 ;
  text-align:center;
}	
  
.sugi_reia_mi{
  width:100%;
}

.sugi_reia_mi li{
  float: none;
  width:100%;
  margin:10px 0 ;
  text-align:center;
  font-size: 14px;
}	
.sugi_reia_mib{
  width:100%;
}

.sugi_reia_mib li{
  float: none;
  width:100%;
  margin:10px 0 ;
  text-align:center;
  font-size: 14px;
}		
  
.sugi_pane{
  width:100%;
}

.sugi_pane li{
  float: none;
  width:100%;
  margin:10px 0 ;
  text-align:center;
}

  /*　お問い合わせ
----------------------------------------------------------*/
.head_toi{padding-top:10%;}
.contact #contents {
  background-image: url(../img/contact/back.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding: 1px 0;
}
.contact_tel {
  width: 80%;
  margin: 3% 10%;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.contact_name {
  font-size: 20px;
  text-align: center;
  margin: auto;
  color:#fff;

}
.contact_time {
  width: 90%;
  margin: 0 0 5% 0;
  padding: 0 5% 0 5%;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color:#fff;
  }
.contact_table .comm {
  width: 80%;
  margin: 3% 10%;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}
.contact_table {
  padding:0;
  margin:3% auto;
  padding: 5% 0;
  color: #fff;
  }
.contact_table table {
  width:90%;
  margin: 0 5%;
  }
.contact_table th {
  width:96%;
  padding: 2% 2%;
  font-size:14px;
  line-height: 24px;
  text-align:left;
  vertical-align:top;
  float: left;
  border: 1px solid #fff;
  }
.contact_table td {
  font-size:14px;
  line-height: 24px;
  width:96%;
  padding: 2% 2%;
  text-align:left;
  float: left;
  }
.submit_btn{
  width: 70%;
  margin: 3% 15% 3% 15%;
  font-size: 22px;
  line-height: 1em;
  padding: 5% 0;
  text-align: center;
  color: #fff;
  background-color: #cf0000;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
}
.submit_btn.a{
  width: 70%;
  margin: 3% 15% 3% 15%;
  font-size: 22px;
  line-height: 1em;
  padding: 5% 0;
  text-align: center;
  color: #fff;
  background-color: #303030;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
}	

.submit_btn::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.submit_btn:hover::after{
  animation: anim_btn_color .5s ease;
}
.submit_btn:hover{
  cursor: pointer;
}

.return_btn{
  width: 70%;
  margin: 3% 15% 3% 15%;
  font-size: 22px;
  line-height: 1em;
  padding: 5% 0;
  text-align: center;
  color: #fff;
  background-color: #cf0000;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
  }
.return_btn::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.return_btn:hover::after{
  animation: anim_btn_color .5s ease;
}
.return_btn:hover{
  cursor: pointer;
}
.confirm_btn{
  width: 70%;
  margin: 3% 15% 3% 15%;
  font-size: 22px;
  line-height: 1em;
  padding: 5% 0;
  text-align: center;
  color: #fff;
  background-color: #cf0000;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
  }
.confirm_btn::after{
  position: absolute;
  /*z-index: -1;*/
  display: block;
  content: '';
  top: 100%;
  width:100%;
  height: 100%;
  background-color: rgba(255,255,255,0.3);
  left:0;
}
.confirm_btn:hover::after{
  animation: anim_btn_color .5s ease;
}
.confirm_btn:hover{
  cursor: pointer;
}
.form_style{
  width:96%; 
  height:auto; 
  padding:2% 2% ;
  vertical-align:middle; 
  font-size:16px; 
  
  }
.form_style_s{
  width:96%; 
  height:auto; 
  padding:2% 2% ;
  vertical-align:middle; 
  font-size:16px; 
  
  }
.form_style_tarea{
  width:96%; 
  height:160px; 
  padding:2% 2% ;
  font-size:16px; 
  
  }
}/* ===========横幅767px以下================ */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 640px) {
.pc { display: none !important; }
.sp { display: block !important; }
}