.works_tit{
  font-size: 30px;
}

.works_tit span.fzS{
  width: auto;
  text-align: left;
    font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", "HG明朝E", "メイリオ", "Meiryo", serif;  
  font-size: 70%;
  font-weight: bold;
}

.works_tit span.fzS::after {
    display:inline-block;
    border-bottom: none;
}

.dTxt .detail dt {
    width: 125px;
 
}

.dTxt .detail dd {
    margin-left: 125px;
  
}

.dTxt .descrp .crt {
  width: 45%;
  float: right;
  padding: 15px;
  background-color: #F2F2F2;
  margin-top: -50px;
}

.dTxt .descrp .crt img{
  width: 40%;
  float: left;
  margin-right: 15px;
}

.dTxt .descrp .crt p{
  padding-top: 45px;
  font-size: 90%;
}


.planWp{
  background-color: #fff;
  padding: 40px;
	text-align: center;
}

.planBox{
width: 80%;
	margin: 20px 10% 40px;
}

.planBox:last-child{
  margin-bottom: 0;
}

.planBox .box1,
.planBox .box2{
  text-align: center;  
  width: 48%;
}
.planBox .box3{ width: 48.5%;  }
.planBox .box4{ width: 48.5%;  }


.planBox .box6 li{
  margin-left: 1em; 
text-indent: -1em; 
  line-height: 1.6;
  margin-bottom: 0.5em;
}

#works21 #sec01_02 .arrow{
  width: 38px;
display: inline-block;
  margin: 300px 35px 0;
}


.boxPth{
     padding: 20px;
    border: #B3B3B3 1px solid; 
}

h3:after {
	content: ""; 
	display: block; 
	clear: both;
}

h4{
  font-weight: bold;
  font-size: 140%;
}
h3 .num{
	background-color: #333;
	color: #fff;
	display: inline-block;
	float: none;
	vertical-align: 5px;
	margin-right: 0.3em;
line-height: 1;
	font-size: 0.5em;
	text-align: center;
    padding: 0.2em 0.4em;
}

@media screen and (max-width:767px){
	
.works_tit{
  font-size: 24px;
}	
	
  
.dTxt .descrp .txl {
    width: 100%;
    float: none;  
} 
  
.dTxt .descrp .crt {
    width: 100%;
    float: none;
  margin-bottom: 20px;
  margin-top: 0;
}  
  
.dTxt .descrp .crt:after {
	content: ""; 
	display: block; 
	clear: both;
}
 
.planWp {
    padding: 20px 10px;
}
  
.planBox{
width: 100%;
    margin: 10px auto 20px;
}
  
.planBox .box1{
  width:90%;
  margin: 0 5%;
}
.planBox .box2,
.planBox .box3,
.planBox .box4,
.planBox .box5,
.planBox .box6{ width: 100%;margin-top: 15px;  }
  
  
#works21 #sec02 .boxL{
	width: 100%;
}  
  
  
}

/*-------*/

.constbox{
  border: #B3B3B3 1px solid;
  padding: 15px;
  position: relative;
}

.constbox .ssTt{
  position: absolute;
    top: 0;
    right: 0;
    background-color: #000;
    color: #ffffff;
    padding: 0 1em;
}


#works21 #sec02 .boxL{
	width:73.4%;
	text-align: left;
  margin-bottom: 40px;
}

#works21 #sec02 .boxR{
	width: 23.2%;
	text-align: left;
  margin-bottom: 40px;
}

#works21 #sec02 .boxR .beforeImg{
	margin-top: 0;
  margin-bottom:40px;

}

#works21 #sec02 .boxL2{
	width:39.4%;
	float: left;
margin-bottom: 40px;
}

#works21 #sec02 .boxR2{
	width:57.5%;
		float: right;
}

#works21 #sec02 .boxL3{
	width:57.5%;
	float: left;

}

#works21 #sec02 .boxR3{
	width:39%;
		float: right;
}



@media screen and (max-width:767px){
  
.constbox{
  padding: 10px;
}  
  
#works21 #sec02 .boxL{
	width: 100%;
	margin-bottom: 0;
}  
  
 #works21 #sec02 .boxPth {
    width: 90%;
   margin:0 5% 20px;
} 
  
  #works21 #sec02 .boxR{
width:100%;
margin: 0 0;
	  display: flex;
	  justify-content: space-between;
  }  
  
	
#works21 #sec02 .boxR Img {
width: 47%;
}	

#works21 #sec02 .boxL2 {
    width: 100%;
  margin:0 0 20px;
}
	
#works21 #sec02 .boxL2 img {
    width: 80%;
  margin:0 10%;
}
		
	
	
#works21 #sec02 .boxR2{
	width: 100%;
  margin: 0 0 0;
} 
  
#works21 #sec02 .boxL3{
	width:100%;
margin: 20px 0;
}
  
#works21 #sec02 .boxR .constbox:before{
  top: -30px;
  left: 45%;
  font-size: 100%;
}
  
}


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

#works21 #sec03 .secbox01 {
  overflow: visible;
}

#works21 #sec03 .boxL{
width:42%;
margin-bottom: 20px;
margin-top:15px;
}


#works21 #sec03 .boxR{
width:54%;
text-align: left;
margin-left: 0;
margin-bottom: 40px;
margin-top:15px;  
display: flex;
justify-content: space-between;	
flex-direction:row-reverse;
}

#works21 #sec03 .boxR .txtBx{
    width: 49.5%;
}

#works21 #sec03 .boxR .phoBx{
	width: 46%;
}

#works21 #sec03 .boxL2{
clear: both;
width: 42%;
float: right;
margin-top: -220px;
}


#works21 #sec03 .boxR2{
width: 54%;
float: left;
margin-top: 40px;
display: flex;
justify-content: space-between;
}

#works21 #sec03 .boxR2 .txtBx{
    width: 49.5%;
}

#works21 #sec03 .boxR2 .phoBx{
	width: 46%;
}


#works21 #sec03 .boxL3{
  margin-top: 40px;
  clear: both;
	width:67%;
  float: left;
}


#works21 #sec03 .boxR3{
  margin-top: -5px;  
	width:29.5%;
float: right;

}



@media screen and (max-width:767px){
  
#works21 #sec03 .boxR {
    width:100%;
	margin-bottom: 20px;
}    
 
#works21 #sec03 .boxL{
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
}	

#works21 #sec03 .boxL2{
	width:100%;
margin-top: 0;	
}


#works21 #sec03 .boxR2{
	width:100%;

}
  
 
}

/*----------------*/
	
#works21 #sec04 .boxL{
	width: 36.5%;
}

#works21 #sec04 .boxR{
width:59.5%;
float: right;
	text-align: left;
}

#works21 #sec04 .boxR .inbox{
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}

#works21 #sec04 .boxR .box1{
width: 51.5%;
  }

#works21 #sec04 .boxR .box2{
width: 42.5%;
  }


@media screen and (max-width:767px){
 
#works21 #sec04 .boxL{
		width: 100%;
margin-bottom: 20px;     
	}

#works21 #sec04 .boxR{
    width: 100%;
  padding-top: 0;
}	

#works21 #sec04 .boxR .box1{
width: 53%;
  }

	
}


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

#sec05{
}

#sec05 .secbox01{
    padding: 10px 0 0;
}
	
#works21 #sec05 .boxL{
	width:48%;
	position: relative;
}

#works21 #sec05 .boxR{
	width:48%;
  text-align: left;
	position: relative;
}

.ssbx{
	position: absolute;
	top:0;
	left: 0;
	background-color: #fff;
	display: inline-block;
	padding: 0 1em;
	border: #ddd solid 1px;
}


@media screen and (max-width:767px){
  
#works21 #sec05 .secbox01{
    padding: 10px 0 0;
}

#works21 #sec05 .boxL{
		width: 100%;
    margin-bottom: 20px;  
      
	}
 

#works21 #sec05 .boxR {
    width:100%;
  margin: 0;
}	
  
 
	
}
/*----------------*/

#works21 #sec06{

}
#works21 #sec06 h3{
	width: 30%;
	padding-top: 0;
}
	
#works21 #sec06 .boxL{
	width:43%;
    margin: -130px 0 15px;
}

#works21 #sec06 .boxR{
	width:53%;
    margin: 20px 0 15px;
	text-align: left;
}

#works21 #sec06 .boxR .inbox{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

#works21 #sec06 .boxR .inbox div{
	width: 47%;
	border: #999 solid 1px;
	padding: 10px;
}
#works21 #sec06 .boxR .inbox div .cp{
	text-align: center;
	display: block;
	padding-top: 5px;
}

@media screen and (max-width:767px){
#works21 #sec06 .boxL {
width: 100%;
	margin-top: 0;
margin-bottom: 10px;        
}
	
	#works21 #sec06 .boxL img{
		width: 70%;
		margin: 0 15%;
	}	

#works21 #sec06 .boxR{
width: 100%;

}
  

}

/*-------sec07---------*/
	
#works21 #sec07 .boxL{
	width:44%;
    margin: 0 0 15px;  
}

#works21 #sec07 .boxR{
	width:52%;
    margin: 0 0 15px;
	text-align: left;
}

#works21 #sec07 .boxR .inbox{
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
}

#works21 #sec07 .boxR .inbox p{
	padding: 0;
	margin: 0 0 10px;
}

#works21 #sec07 .boxR .inbox img{
	width: 39%;
	margin-right: 20px;
}

#works21 #sec07 .boxR .map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

#works21 #sec07 .boxR .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



@media screen and (max-width:767px){
#works21 #sec07 .boxL {
width: 80%;
margin:20px 10%;        
}

#works21 #sec07 .boxR{
width: 100%;
margin-bottom: 0;        
}

	#works21 #sec07 .boxR .inbox{
		margin-bottom: 0;
	}	
	
#works21 #sec07 .boxR .inbox img{
   width: 31%;
	margin-right: 15px;
}
	
	
  
}

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



.inlineBlk {
    display: inline-block;
}