@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　gallery
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl{
  background-image:url(../image/bg_ttl_pc.jpg);  
}
.works-pickup-detail #Footer .ft-cont::after {
	background: transparent;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* top
-----------------------------------------------------------------*/
/* intro */
.works-home .intro{
  padding: 65px 0 70px;
}
.works-home .intro h2{
  font-size: 2.3rem;
  line-height: 1.6;
  text-align:center;
  font-weight: normal;
}

/* pick up */
.works-home .pickup{
  padding: 70px 0 85px;
  background: #E1E1E1;
}
.works-home .pickup h2{
  margin-bottom: 45px;
  font-size: 2.7rem;
  line-height: 1.2;
  text-align:center;
  letter-spacing: 0.1em;
  font-weight: normal;  
}
.works-home .pickup-works-list{
  display: flex;
  flex-wrap: wrap;
}
.works-home .pickup-works-list li{
  max-width: 580px;
  width: calc(50% - 19px);
  background: #FFF;
    position: relative;
}
/*.works-home .pickup-works-list li.new::after{
    content: 'NEW';
    font-size: 16px;
    color: #fff;
    background-color: #B02629;
    padding: 5px 25px;
    position: absolute;
    top: 15px;
    left: 0;
    letter-spacing: 0.1rem;
}*/
.works-home .pickup-works-list li.new::after{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "";
    width: 100px;
    height: 100px;
    background: url(../../image/ico_pickup_new.svg) no-repeat;
    background-size: 100% auto;
}

.works-home .pickup-works-list li:nth-child(even){
  margin-left: 38px;  
}
.works-home .pickup-works-list li:nth-child(n+3){
  margin-top: 40px;  
}
.works-home .pickup-works-list a{
  position: relative;
  display:block;
  width: 100%;
  height: 100%;
  padding: 35px;
  background: #FFF;
  transition:.3s;  
}
.works-home .pickup-works-list a:hover{
  opacity: .7;  
}
.works-home .pickup-works-list a::after{
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 87px;
  height: 87px;
  background:url(../image/ico_arw_pickup.svg) no-repeat;
  background-size: 100% auto;
}
.works-home .pickup-works-list .pic{
  margin-bottom: 20px;  
}
.works-home .pickup-works-list .pic.tsukaguchi{
  margin-bottom: 10px; 
  position: relative;
}
.works-home .pickup-works-list .pic.tsukaguchi img[src$="svg"]{
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  padding: 10px 20px 20px;
}
.works-home .pickup-works-list .txt-gd{
  margin-bottom: 15px;
  text-align: center;
}
.works-home .pickup-works-list .txt-gd span{
  padding: 3px 10px;
  background: #BD0000;
  font-size: 1.3rem;
  color: #FFF;
  text-indent: -0.5em;
  line-height:1.2;  
}
.works-home .pickup-works-list h3{
  margin-bottom: 15px;
  font-size: 2.2rem;
  line-height:1.5;
  text-align: center;  
}
.works-home .pickup-works-list .address{
  margin-bottom: 10px;
  font-size: 1.3rem;
  line-height:1.5;
  text-align: center;  
}

.works-home .works-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 236px;
  margin: 0 auto;
  padding: 7px 17px;
  background: #E1E1E1;
  line-height:1;
  font-size: 1.2rem;
}
.works-home .works-info.large{
  width: 246px;
}
.works-home .works-info div{
  display: flex;
}
.works-home .works-info dt{
  padding-right: 5px;
  border-right: 1px solid #666;  
}
.works-home .works-info dd{
  padding-left: 5px;
}

/* other works */
.works-home .other-works{
  padding: 95px 0 100px;  
}
.works-home .other-works-list{
  display: flex;
  flex-wrap: wrap;  
}
.works-home .other-works-list li{
  margin-left: 40px;
  width: calc((100% - 80px)/3);
    border: 1px solid #DBDBDB;
    padding-bottom: 40px;
    position: relative;
}
/*.works-home .other-works-list li a{
  position: relative;
}*/
.works-home .other-works-list li a:hover{
  opacity: .5;
  transition: all .3s;
}

.works-home .other-works-list li a::before{
  content: ""; 
  position: absolute;
  right: 0;
/*  bottom: -40px;*/
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 60px;
  border-color: transparent transparent #333333 transparent;
}
.works-home .other-works-list li a::after
{
  content: url(../image/arroww.svg);
  position: absolute;
/*  bottom:-40px;*/
  bottom: 0;
  right:2px;
  transition: all .3s;
}
.works-home .other-works-list li a .txt-gd{
    padding: 5px 10px;
    background: #BD0000;
    font-size: 1.3rem;
    color: #FFF;
    text-indent: -0.5em;
    line-height: 1.2;
    text-align: center;
    width: 80%;
    margin: 0 auto 10px;
    
}
.works-home .other-works-list li:nth-child(3n+1){
  margin-left: 0;  
}
.works-home .other-works-list li:nth-child(n+4){
  margin-top: 50px;
}
.works-home .other-works-list .pic{
  margin-bottom: 15px;  
}
.works-home .other-works-list h3{
  margin-bottom: 8px;
  font-size: 2rem;
  line-height:1.5;
  text-align: center; 
}
.works-home .other-works-list .address{
  margin-bottom: 7px;
  font-size: 1.2rem;
  line-height:1.5;
  text-align: center; 
}


/* 物件 汎用
-----------------------------------------------------------------*/
.works-detail{
  padding-bottom: 110px;  
}
.works-detail h2{
  padding: 80px 0;
  text-align: center;
  font-size: 3.4rem; 
}
.works-detail .works-detail-hd{
  padding-top: 740px;
  background: no-repeat center top;
  background-size: auto 865px;
}
.works-detail .works-detail-hd .inner{
  max-width: 1300px;  
}
.works-detail .works-detail-hd .intro{
  padding: 60px 50px 115px;
  border-top: 8px solid #0090D7;
  background: #FFF;
}
.works-detail .works-detail-hd .txt-lead{
  margin-bottom: 55px;
  font-size: 3.1rem;
  line-height:1.4;
  text-align: center;
  font-weight:bold;  
}
.works-detail .works-detail-hd .intro > .pic{
  margin-bottom: 40px;
  text-align:center;  
}
.works-detail .works-detail-hd .intro > h3{
  margin-bottom: 20px;
  font-size: 2.5rem;
  text-align:center; 
}
.works-detail .works-detail-hd .intro > .txt{
  font-size: 1.5rem;
  text-align:center;  
}

/* works-features */
.works-detail .works-features{
  margin-bottom: 185px;  
}
.works-detail .works-features .feature-box{
  position: relative;
  display: flex;
  align-items: center;  
}
.works-detail .works-features .feature-box+.feature-box{
  margin-top: 170px;  
}
.works-detail .works-features .feature-box::after{
  position: absolute;
  left: 0;
  bottom: -90px;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #EEE;  
}
.works-detail .works-features .feature-box .pic{
  position: relative;
  z-index:10;
  width: 50%;
  text-align:center;  
}
.works-detail .works-features .feature-box .pic_multi{
    width: 50%;    
}
.works-detail .works-features .feature-box .pic_multi .pic{
    width: 100%;    
}
.works-detail .works-features .feature-box.rev .pic_multi .pic.sub{
    margin: 10px 0 0 auto;
}
.works-detail .works-features .feature-box .pic_multi .pic.sub{
    margin: 10px auto 0 0;
}
.works-detail .works-features .feature-box .txt-area{
  position: relative;
  z-index:10;  
  width: 50%;
}
.works-detail .works-features .feature-box .txt-box{
  max-width: 630px;
  transform: translateY(90px);  
  padding: 0 30px 0 6%;    
}
.works-detail .works-features .feature-box h3{
  margin-bottom: 25px;
  font-size: 2.5rem;
  line-height:1.5;  
}
.works-detail .works-features .feature-box .txt{
  font-size: 1.5rem;
}
.works-detail .works-features .feature-box.rev{
  flex-direction: row-reverse;  
}
.works-detail .works-features .feature-box.rev .txt-area{
  display: flex;
  justify-content: flex-end;
}
.works-detail .works-features .feature-box.rev .txt-box{
  padding: 0 6% 0 30px;  
}
  

/* staff-voice */
.works-detail .staff-voice{
  position: relative;
  margin-bottom: 156px;
}
.works-detail .staff-voice .pic{
  position: absolute;
  right:0;
  top: 65px;
  width: 44.16%;  
}
.works-detail .staff-voice .txt-area{
  position: relative;
  /*width: 75%;
  padding: 65px 22.5% 50px 8%;*/
	padding: 65px 8% 50px 8%; 
  background: #EEE;   
}
.works-detail .staff-voice .txt-area::after{
  position: absolute;
  left: 47%;
  bottom: 0;
  transform: translateY(50%);
  display: none;
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 40px 76px;
  border-right-color: #EEE;  
}
.works-detail .staff-voice .txt-area h3{
  position: absolute;
  left: 10.5%;
  top: 0;
  transform: translateY(-50%);
  width: 326px;
  padding: 10px;
  background:#009BE1;
  text-align:center;
  font-size: 2.3rem;
  color: #FFF;  
}
.works-detail .staff-voice .txt-area .txt{
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.works-detail .staff-voice .txt-area .name{
  font-size: 1.8rem;
  text-align: right;
}
.works-detail .staff-voice .txt-area .name span{
  display: block;
  font-size: 1.3rem;  
}


/* works-information */
.works-detail .works-information-box{
  padding: 20px 20px 35px;
  border: 1px solid #EEE;
}
.works-detail .works-information-box h3{
  margin-bottom: 15px;
  font-size: 1.8rem;
  text-align: center;  
}
.works-detail .works-information-box dl{
  display: flex;
  justify-content: space-around;
  align-items: center;  
}
.works-detail .works-information-box dl div{
  display: flex;
  align-items: center;  
}
.works-detail .works-information-box dt{
  width: 100px;
  flex-shrink: 0;
  padding: 5px;
  margin-right: 15px;
  border: 1px solid #000;
  font-size: 1.2rem;
  text-align: center;  
}
.works-detail .works-information-box dd{
  padding-right: 10px;
  font-size: 1.4rem;
}

/* works-cont-nav */
.works-cont-nav{
	padding: 50px 0 75px;
	background: #EEE;	
}
.works-cont-nav h2{
  margin-bottom: 40px;
  font-size: 2.2rem;
  line-height: 1.6;
  text-align:center;
  letter-spacing: 0.1em;
  font-weight: normal;  
}
.works-cont-nav .cont-nav-list{
	display: flex;
  flex-wrap: wrap;
	justify-content: space-between;	
}
.works-cont-nav .cont-nav-list li{
	max-width: 394px;
	width: calc((100% - 30px)/3);	
}
.works-cont-nav .cont-nav-list li:nth-child(n+4){
  margin-top: 20px;  
}
.works-cont-nav .cont-nav-list a{
	display: block;	
}
.works-cont-nav .cont-nav-list .pic{
	margin-bottom: 10px;	
}
.works-cont-nav .cont-nav-list .txt{
	font-size: 1.6rem;	
}
.works-cont-nav .cont-nav-list .txt span{
	position: relative;
	display: inline-block;
	padding-right: 50px;	
}
.works-cont-nav .cont-nav-list .txt span::after{
  position: absolute;
  right: 0;
  top: 8px;
  display: block;
  content: "";
  width: 42px;
  height: 7px;
  background:url(../../common/image/arw_btn_bk.svg) no-repeat;
  background-size:100% auto;
  transition: .3s;  	
}
.works-cont-nav .cont-nav-list a:hover .txt span::after{
	right: -8px;	
}



/* 塚口
-----------------------------------------------------------------*/
.tsukaguchi .works-detail .works-detail-hd{
  background-image:url(../image/tsukaguchi/img_main.jpg);  
}
.tsukaguchi .good-design{
  display: flex;
  margin-bottom: 65px;
  padding: 30px 0 35px;
  border: 1px solid #E1E1E1;  
}
.tsukaguchi .good-design .logo{
  width: 20%;
  padding: 0 10px;
  text-align:center;  
}
.tsukaguchi .good-design .txt-area{
  width: 80%;
  padding-right: 6.25%;    
}
.tsukaguchi .good-design .txt-area.logo-none{
    margin: auto;
}
.tsukaguchi .good-design h3{
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: normal;
}
.tsukaguchi .good-design h3 span{
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  padding: 2px 25px;
  background: #BD0000;
  font-size: 2.2rem;
  color: #FFF;
  text-indent:-0.5em;
  font-weight: bold;  
}
.tsukaguchi .good-design h4{
  margin-bottom: 5px;
  font-size: 1.6rem;
}
.tsukaguchi .good-design p{
  font-size: 1.4rem;  
}
.tsukaguchi .works-features .feature-box.feature04{
  display: block;
}
.tsukaguchi .works-features .feature-box.feature04 .pic{
  width: 100%;
  margin-bottom: 30px;  
}
.tsukaguchi .works-features .feature-box.feature04 .txt-area{
  width: 100%; 
}
.tsukaguchi .works-features .feature-box.feature04 .txt-box{
  max-width: 100%;  
  transform: none;
  text-align:center;  
  padding: 0;
}

.btn-works {
    margin: 20px auto 100px;
    font-size: 1.6rem;
  max-width: 500px;
}

.btn-works a {
    background: #333;
    border-color: #333;
    color: #FFF;
    height: 60px;
    line-height: 58px;
    font-size: 1.8rem;
}
.btn-base a::after, .btn-base span::after{
    background-image: url(../../common/image/arw_btn_w.svg);
}


/* 天王寺
-----------------------------------------------------------------*/
.tennouji .works-detail .works-detail-hd{
  background-image:url(../image/tennouji/img_main.jpg);  
}

/* 京都西大路五条
-----------------------------------------------------------------*/
.nishioji .works-detail .works-detail-hd{
  background-image:url(../image/nishioji/img_main.jpg);  
}


/* 京都烏丸
-----------------------------------------------------------------*/
.karasuma .works-detail .works-detail-hd{
  background-image:url(../image/karasuma/img_main.jpg);  
}

/* 芦屋
-----------------------------------------------------------------*/
.ashiya .works-detail .works-detail-hd{
  background-image:url(../image/ashiya/img_main.jpg);  
}


/* 神戸
-----------------------------------------------------------------*/
.kobe .works-detail .works-detail-hd{
  background-image:url(../image/kobe/img_main.jpg);  
}

/* 大手前
-----------------------------------------------------------------*/
/*.otemae .works-detail .works-detail-hd{
  background-image:url(../image/otemae/img_main.jpg); 
}*/
.otemae .works-detail .works-detail-hd{
	padding-top: 0;
	border-top: 8px solid #0090D7;
}
.otemae .works-detail .works-detail-hd .intro{
	border-top: none;
}

/* 大阪本町
-----------------------------------------------------------------*/
.honmachi .works-detail .works-detail-hd{
	padding-top: 0;
	border-top: 8px solid #0090D7;
}
.honmachi .works-detail .works-detail-hd .intro{
	border-top: none;
}
.honmachi .works-detail .feature03{
	position: relative;
	padding-bottom: 200px;
}
.honmachi .works-detail .feature03 .azulejo{
	width: 70%;
	position: absolute;
	bottom: -10px;
	right: 0;
}
/* 大森
-----------------------------------------------------------------*/
/*.otemae .works-detail .works-detail-hd{
  background-image:url(../image/otemae/img_main.jpg); 
}*/
.omori .works-detail .works-detail-hd{
	padding-top: 0;
	border-top: 8px solid #0090D7;
}
.omori .works-detail .works-detail-hd .intro{
	border-top: none;
}
.omori-intro img:first-of-type{
    margin-right: 1%;
}
.omori-intro img:last-of-type{
    margin-left: 1%;
}

/* 上本町
-----------------------------------------------------------------*/
/*.otemae .works-detail .works-detail-hd{
  background-image:url(../image/otemae/img_main.jpg); 
}*/
.uehonmachi .works-detail .works-detail-hd{
	padding-top: 0;
	border-top: 8px solid #0090D7;
}
.uehonmachi .works-detail .works-detail-hd .intro{
	border-top: none;
}

/* 京都円町
-----------------------------------------------------------------*/
/*.otemae .works-detail .works-detail-hd{
  background-image:url(../image/otemae/img_main.jpg); 
}*/
.enmachi .works-detail .works-detail-hd{
	padding-top: 0;
	border-top: 8px solid #0090D7;
}
.enmachi .works-detail .works-detail-hd .intro{
	border-top: none;
}
.enmachi-intro{
    display: flex;
}
.enmachi-intro img:first-of-type{
    margin-right: 1%;
}
.enmachi-intro img:last-of-type{
    margin-left: 1%;
}


/* 賀茂川
-----------------------------------------------------------------*/

.kamogawa .works-detail .works-detail-hd{
	padding-top: 0;
	border-top: 8px solid #0090D7;
}
.kamogawa .works-detail .works-detail-hd .intro{
	border-top: none;
}
.kamogawa-intro{
    display: flex;
}
.kamogawa-intro img:first-of-type{
    margin-right: 1%;
}
.kamogawa-intro img:last-of-type{
    margin-left: 1%;
}

.kamogawa .good-design{
  display: flex;
  margin-bottom: 65px;
  padding: 30px 0 35px;
  border: 1px solid #E1E1E1;  
}
.kamogawa .good-design .logo{
  width: 20%;
  padding: 0 10px;
  text-align:center;  
}
.kamogawa .good-design .txt-area{
  width: 80%;
  padding-right: 6.25%;  
}
.kamogawa .good-design h3{
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: normal;
}
.kamogawa .good-design h3 span{
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  padding: 2px 25px;
  background: #BD0000;
  font-size: 2.2rem;
  color: #FFF;
  text-indent:-0.5em;
  font-weight: bold;  
}
.kamogawa .good-design h4{
  margin-bottom: 5px;
  font-size: 1.6rem;
}
.kamogawa .good-design p{
  font-size: 1.4rem;  
}

.kamogawa .good-design .logo{
  width: 20%;
  padding: 0 10px;
  text-align:center;  
}
.kamogawa .good-design .txt-area{
  width: 80%;
  padding-right: 6.25%;  
}
.kamogawa .good-design h3{
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: normal;
}
.kamogawa .good-design h3 span{
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  padding: 2px 25px;
  background: #BD0000;
  font-size: 2.2rem;
  color: #FFF;
  text-indent:-0.5em;
  font-weight: bold;  
}
.kamogawa .good-design h4{
  margin-bottom: 5px;
  font-size: 1.6rem;
}
.kamogawa .good-design p{
  font-size: 1.4rem;  
}

 /* 二条 
-----------------------------------------------------------------*/
    
    .works-detail .works-detail-hd .intro .pic.kyotonijoMV img{
          max-width: 1000px;
    } 

 /* 四条烏丸
-----------------------------------------------------------------*/
.shijokarasumaMV{
  display: flex;
  justify-content: center;
}
.shijokarasumaMV img:first-of-type{
  margin-right: 1%;
}

/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


/* top
-----------------------------------------------------------------*/
/* intro */
  .works-home .intro{
    padding: 35px 0;
  }
  .works-home .intro h2{
    font-size: 1.8rem;
  }

/* pick up */
  .works-home .pickup{
    padding: 35px 0 40px;
  }
  .works-home .pickup h2{
    margin-bottom: 15px; 
  }
  .works-home .pickup-works-list{
    display: block;
  }
  .works-home .pickup-works-list li{
    max-width: 100%;
    width: 100%;
  }
  .works-home .pickup-works-list li:nth-child(even){
    margin-left: 0;  
  }
  .works-home .pickup-works-list li:nth-child(n+2){
    margin-top: 30px;  
  }
/*    .works-home .pickup-works-list li.new::after{
        font-size: 14px;
        top: 10px;
    }*/
    .works-home .pickup-works-list li.new::after{
        width: 80px;
        height: 80px;
    }
  .works-home .pickup-works-list a{
    padding: 20px 20px 25px;
  }
  .works-home .pickup-works-list a::after{
    width: 50px;
    height: 50px;
  }
  .works-home .pickup-works-list .pic{
    margin-bottom: 15px;  
  }
  .works-home .pickup-works-list li:first-child .pic{
    margin-bottom: 10px;  
  }
  .works-home .pickup-works-list .txt-gd{
    margin-bottom: 5px;
  }
  .works-home .pickup-works-list h3{
    margin-bottom: 5px;
    font-size: 2rem;
    line-height:1.4;
  }
  .works-home .pickup-works-list .address{
    margin-bottom: 5px;
    font-size: 1.4rem;
  }

/* other works */
  .works-home .other-works{
    padding: 40px 0;  
  }
  .works-home .other-works-list li{
    margin-left: 20px;
    width: calc((100% - 15px)/2);
    padding-bottom: 0;
  }
    .works-home .other-works-list li{
        padding-bottom: 20px;
    }
  .works-home .other-works-list li:nth-child(odd){
    margin-left: 0;  
  }
  .works-home .other-works-list li:nth-child(even){
    margin-left: 15px;  
  }
  .works-home .other-works-list li:nth-child(n+3){
    margin-top: 20px;
  }
  .works-home .other-works-list .pic{
    margin-bottom: 10px;  
  }
  .works-home .other-works-list h3{
    margin-bottom: 5px;
    font-size: 1.5rem;
    line-height:1.4;
  }
  .works-home .other-works-list .address{
    margin-bottom: 7px;
    font-size: 1.1rem;
  }
  .works-home .other-works-list .works-info{
    display: block;
    width: 100%;
    padding: 5px 10px;
  }
  .works-home .other-works-list .works-info div{
    justify-content: center;
  }
  .works-home .other-works-list .works-info div+div{
    margin-top: 3px; 
  }
  .works-home .other-works-list .works-info dt{
    padding-right: 5px;
    border-right: 1px solid #666;  
  }
  .works-home .other-works-list .works-info dd{
    padding-left: 5px;
    
  }


/* 物件 汎用
-----------------------------------------------------------------*/
  .works-detail{
    padding-bottom: 50px;  
  }
  .works-detail h2{
    padding: 30px 0;
    font-size: 2.3rem; 
  }
  .works-detail .works-detail-hd{
    padding-top: 53.33vw;
    background-size: auto 66.66vw;
  }
  .works-detail .works-detail-hd .inner{
    max-width: 100%;
    margin: 0 15px;  
  }
  .works-detail .works-detail-hd .intro{
    padding: 20px 0 30px;
    border-top: 4px solid #0090D7;
  }
  .works-detail .works-detail-hd .txt-lead{
    margin-bottom: 20px;
    font-size: 1.6rem;
    line-height:1.5;  
  }
  .works-detail .works-detail-hd .intro > .pic{
    margin-bottom: 20px;  
  }
  .works-detail .works-detail-hd .intro > h3{
    margin-bottom: 10px;
    font-size: 1.6rem;
  }
  .works-detail .works-detail-hd .intro > .txt{
    font-size: 1.2rem;
  }

/* works-features */
  .works-detail .works-features{
    margin-bottom: 60px;  
  }
  .works-detail .works-features .feature-box{
    display: block;
  }
  .works-detail .works-features .feature-box+.feature-box{
    margin-top: 40px;  
  }
  .works-detail .works-features .feature-box::after{
    bottom: 0;
    height: calc(100% - 27.46vw); 
  }
  .works-detail .works-features .feature-box .pic{
    padding: 0 15px;
    width: 100%;  
  }
  .works-detail .works-features .feature-box .txt-area{  
    width: 100%;
  }
  .works-detail .works-features .feature-box .txt-box{
    max-width: 100%;
    transform: none;  
    padding: 20px 15px 35px;
    text-align: center;    
  }
  .works-detail .works-features .feature-box h3{
    margin-bottom: 10px;
    font-size: 1.6rem;
  }
  .works-detail .works-features .feature-box .txt{
    font-size: 1.2rem;
  }
  .works-detail .works-features .feature-box.rev .txt-area{
    display: block;
  }
  .works-detail .works-features .feature-box.rev .txt-box{
    padding: 20px 15px 35px; 
  }
  .works-detail .works-features .feature-box .pic_multi{
    width: 100%;    
}
.works-detail .works-features .feature-box .pic_multi .pic{
    width: 100%;
}

/* staff-voice */
  .works-detail .staff-voice{
    margin-bottom: 40px;
  }
  .works-detail .staff-voice .inner{
    padding: 0; 
  }
  .works-detail .staff-voice .pic{
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    padding: 0 15px;
    margin-top: -36vw;  
  }
  .works-detail .staff-voice .txt-area{
    width: 100%;
    padding: 40px 15px 20px; 
    background: #EEE;   
  }
  .works-detail .staff-voice .txt-area::after{
    display: none; 
  }
  .works-detail .staff-voice .txt-area h3{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 180px;
    padding: 5px;
    text-align:center;
    font-size: 1.6rem; 
  }
  .works-detail .staff-voice .txt-area h3::after{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,50%);
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 10px 13px;
    border-right-color: #00A1E7;      
  }
  .works-detail .staff-voice .txt-area .txt{
    margin-bottom: 15px;
    font-size: 1.2rem;
  }
  .works-detail .staff-voice .txt-area .name{
    margin-bottom: 15px;
    font-size: 1.2rem;
  }
  .works-detail .staff-voice .txt-area .name span{
    font-size: 1rem;  
  }


/* works-information */
  .works-detail .works-information-box{
    padding: 15px 25px;
  }
  .works-detail .works-information-box h3{
    margin-bottom: 5px;
    font-size: 1.3rem;
  }
  .works-detail .works-information-box dl{
    display: block;
  }
  .works-detail .works-information-box dl div+div{
    margin-top: 5px; 
  }
  .works-detail .works-information-box dt{
    width: 80px;
    padding: 2px 5px;
    margin-right: 10px;
    font-size: 1.1rem;
  }
  .works-detail .works-information-box dd{
    padding-right: 0;
    font-size: 1.1rem;
  }

/* works-cont-nav */
  .works-cont-nav{
    padding: 20px 0 25px;
  }
  .works-cont-nav h2{
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .works-cont-nav .cont-nav-list li{
    max-width: 100%;
    width: calc(50% - 5px);
  }
.works-home .other-works-list li a{
/*  position: relative;*/
    display: inline-block;
}

.works-home .other-works-list li a::before{
  bottom: 0px;
  border-width: 0 0 37px 52px;
  border-color: transparent transparent #333333 transparent;
}
.works-home .other-works-list li a::after
{
  content: url(../image/arroww.svg);
  position: absolute;
  bottom:0px;
  right:2px;
  transition: all .3s;
}
  .works-cont-nav .cont-nav-list li:nth-child(n+3){
    margin-top: 10px;  
  }
  .works-cont-nav .cont-nav-list .pic{
    margin-bottom: 5px;	
  }
  .works-cont-nav .cont-nav-list .txt{
    font-size: 1.2rem;
    line-height:1.5;	
  }
  .works-cont-nav .cont-nav-list .txt span{
    padding-right: 35px;	
  }
  .works-cont-nav .cont-nav-list .txt span::after{
    top: 4px;
    width: 30px;
    height: 7px; 	
  }
  
.btn-works {
    margin: 0 auto 40px;
  max-width: 87.5%;
}



/* 塚口
-----------------------------------------------------------------*/
  .tsukaguchi .good-design{
    flex-wrap:wrap;
    margin-bottom: 40px;
    padding: 20px 15px 25px;
  }
  .tsukaguchi .good-design .logo{
    padding: 30px 10px 0 0;
  }
/*    .tsukaguchi .good-design .txt-area.logo-none{
        margin-left: 0;
    }*/
  .tsukaguchi .good-design .txt-area{
    padding-right: 0;  
  }
  .tsukaguchi .good-design h3{
    width: 100%;
    margin-bottom: 15px;
    font-size: 1.6rem;
    text-align: center;
    line-height:1.4;    
  }
  .tsukaguchi .good-design h3 span{
    width: 100%;
    margin-bottom: 8px;
    margin-right: 0;
    padding: 4px 15px;
    font-size: 1.6rem;  
  }
  .tsukaguchi .good-design h4{
    margin-bottom: 5px;
    font-size: 1.3rem;
  }
  .tsukaguchi .good-design p{
    font-size: 1.2rem;  
  }
  .tsukaguchi .works-features .feature-box.feature04::after{
    height: calc(100% - 16vw); 
  }
  .tsukaguchi .works-features .feature-box.feature05::after{
    height: calc(100% - 16.5vw); 
  }
  .tsukaguchi .works-features .feature-box.feature06:after{
    height: calc(100% - 36vw); 
  }      
  .tsukaguchi .works-features .feature-box.feature04 .pic{
    margin-bottom: 0;
    padding: 0;  
  }
  .tsukaguchi .works-features .feature-box.feature04 .txt-box{
    padding: 20px 0 35px;
  }  
  
.works-home .pickup-works-list .pic.tsukaguchi img[src$="svg"]{  
 max-width: 10%;
  top: -1px;
  left:-1px;
}
  
	
/* 大手前
-----------------------------------------------------------------*/
.otemae .works-detail .works-detail-hd{
	border-top: 4px solid #0090D7;
}
.otemae .works-detail .works-detail-hd .intro{
	border-top: none;
}

	
/* 本町
-----------------------------------------------------------------*/
.honmachi .works-detail .works-detail-hd{
	border-top: 4px solid #0090D7;
}
.honmachi .works-detail .works-detail-hd .intro{
	border-top: none;
}
.honmachi .works-detail .feature03 .azulejo{
	position: relative;
	margin-top: 1px;
}
.honmachi .works-detail .feature03{
	padding-bottom: 0;
}
  
 /* 大森 
-----------------------------------------------------------------*/
.works-detail .works-detail-hd .intro .pic img{
/*  width: 50%!important;*/
  width: 48%!important;
}

/* 真上町 
-----------------------------------------------------------------*/
    
    .works-detail .works-detail-hd .intro .pic.makamiMV img{
          width: 100%!important;
    }
  
/* 二条 
-----------------------------------------------------------------*/
    
    .works-detail .works-detail-hd .intro .pic.kyotonijoMV img{
          width: 100%!important;
    }  
  
/* 賀茂川 
-----------------------------------------------------------------*/
    
    .works-detail .works-detail-hd .intro .pic.kamogawaMV img{
          width: 100%!important;
    }  
    .kamogawa .good-design{
    flex-wrap:wrap;
    margin-bottom: 40px;
    padding: 20px 15px 25px;
  }
  .kamogawa .good-design .logo{
    padding: 30px 10px 0 0;
  }
  .kamogawa .good-design .txt-area{
    padding-right: 0;  
  }
  .kamogawa .good-design h3{
    width: 100%;
    margin-bottom: 15px;
    font-size: 1.6rem;
    text-align: center;
    line-height:1.4;    
  }
  .kamogawa .good-design h3 span{
    width: 100%;
    margin-bottom: 8px;
    margin-right: 0;
    padding: 4px 15px;
    font-size: 1.6rem;  
  }
  .kamogawa .good-design h4{
    margin-bottom: 5px;
    font-size: 1.3rem;
  }
  .kamogawa .good-design p{
    font-size: 1.2rem;  
  }

/* 天王寺真田山公園
-----------------------------------------------------------------*/    
    .works-detail .works-detail-hd .intro .pic.tennoujisanadayamakouenMV img{
          width: 100%!important;
    }  

/* 上本町サウスビュー
-----------------------------------------------------------------*/    
    .works-detail .works-detail-hd .intro .pic.uehonmachisouthviewMV img{
          width: 100%!important;
    }  

/* 天王寺フロントマークス
-----------------------------------------------------------------*/    
    .works-detail .works-detail-hd .intro .pic.tennoujifrontmarksMV img{
          width: 100%!important;
    }  
  
}