.workstit_bx {
    position: absolute;
    top: 34%;
    left: 0;
    width: 720px;
    height: 460px;
    padding: 30px 40px 30px;
    background: rgba(255, 255, 255, 0.65);
}
.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;
}

.planBox{
/*  display: flex;
  justify-content: space-between;*/
	margin:  0 auto;
}

.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;
}

#works23 #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: 120%;
}




@media screen and (max-width:767px){
	
.works_tit {
    font-size: 28px;
}	
	
    .workstit_bx {
        display: block;
        width: 100%;
        height: auto;
        padding: 10px 0;
        position: static;
        background: rgba(255, 255, 255, 0.6);
    }	
	
  
.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{
  display: block;
  margin-bottom: 20px;
}
  
.planBox .box1{
  width:90%;
  margin: 0 5%;
}
.planBox .box2,
.planBox .box3,
.planBox .box4,
.planBox .box5,
.planBox .box6{ width: 100%;margin-top: 15px;  }
  
  
#works23 #sec02 .boxL{
	width: 100%;
}  
  
  
}

/*-------*/
.constbox {
    border: #B3B3B3 1px solid;
    padding: 10px;
    position: relative;
}

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

#works23 #sec02 .boxPth{
  margin-bottom: 40px;
}

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

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

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

}


#works23 #sec02 .boxR .constbox{
  position: relative;
}


#works23 #sec02 .boxR .constbox:before{
content: "\f078";
font-family: "Font Awesome 5 Free";
  color: #000;
    font-weight:600;
  position: absolute;
  top: -50px;
  left: 45%;
  font-size: 200%;
}


#works23 #sec02 .boxL2{
	width:58%;
	float: left;
}

#works23 #sec02 .boxR2{
	width:38%;
	float: right;

}

#works23 #sec02 .boxL3{
	margin-top: 50px;
	width:40%;
	float: left;


}
#works23 #sec02 .boxR3{
	margin-top: 30px;	
	width:54%;
	float: right;


}
#works23 #sec02 .boxR3 > div{
display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40px;
}

#works23 #sec02 .boxR3 > div img{
	width: 48%;
	margin-left: 20px;
}

@media screen and (max-width:767px){
  
.constbox{
  padding: 10px;
}  
  
#works23 #sec02 .boxL{
	width: 100%;
  margin-bottom: 20px;
}  
  
 #works23 #sec02 .boxPth {
    width: 90%;
   margin:0 5% 20px;
} 
  
  #works23 #sec02 .boxR{
width:80%;
margin: 0 10% 0;
  }  
  
	
#works23 #sec02 .boxR .beforeImg {
width: 100%;
margin: 0 0 20px;
}	

#works23 #sec02 .boxL2 {
    width: 100%;
  margin:0 0 20px;
}
	
	
#works23 #sec02 .boxR2{
	width:47%;
  margin: 0 0 0;
} 
  
#works23 #sec02 .boxL3{
	width:47%;
margin: 0 0;
}
  
#works23 #sec02 .boxR .constbox:before{
  top: -30px;
  left: 45%;
  font-size: 100%;
}
#works23 #sec02 .boxR3 {
    margin-top: 20px;
    width: 100%;
}	
	
  
}


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

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

#works23 #sec03 .boxL{
	width:67%;
  margin-bottom: 20px;

}


#works23 #sec03 .boxR{
	width:29.5%;
  margin-left: 0;
  margin-top: 0;
margin-bottom: 20px;

}


#works23 #sec03 .boxL2{
  clear: both;
	width:48%;
  float: left;
}


#works23 #sec03 .boxR2{
	width:48%;
float: right;

}

#works23 #sec03 .boxR2 .beforeImg{
  margin-top: 0;
}



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


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

}



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

#works23 #sec03 .boxL2{
	width:100%;
}


#works23 #sec03 .boxR2{
	width:100%;
margin: 20px 0;  
}
  
#works23 #sec03 .boxR2 .beforeImg {
    margin-bottom: 0;
}  
  
#works23 #sec03 .boxL3 {
    width: 100%;
  margin-top: 0;
}  
#works23 #sec03 .boxR3 {
    margin:15px 15% 0;
    width: 70%;
}
  
#works23 #sec03 .boxR .constbox:before {
    top: -35px;
    left: 45%;
    font-size: 100%;
}  
  
}

/*----------------*/
	
#works23 #sec04 .boxL{
	width: 60%;
  margin-bottom: 20px;
}

#works23 #sec04 .boxR{
	width: 37%;
float: right;
text-align: left;

}

#works23 #sec04 .boxL2{
	width: 54%;
	clear: both;
	float: left;
}

#works23 #sec04 .boxR2{
	width: 21%;
float: right;
text-align: left;
margin-top: -160px;
}




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

#works23 #sec04 .boxR{
    width: 100%;
  padding-top: 0;
  margin-bottom: 20px;
}	


#works23 #sec04 .boxL2{
	width: 65%;

}

#works23 #sec04 .boxR2{
	width: 30%;
margin-top:0;
}
	
}


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

#sec05 .secbox01{
    padding: 10px 0 0;
}
	
#works23 #sec05 .boxL{
	width:62%;
}

#works23 #sec05 .boxR{
	width:34.4%;
  text-align: left;
  margin-left: 0;
}
#works23 #sec05 .boxR .beforeImg {
	width:85%;  
	margin-left: 15%;
    margin-top:0;
margin-bottom:40px;
}

#works23 #sec05 .boxL2{
	width:20%;
float: left;
margin-top: 20px;
}

#works23 #sec05 .boxR2{
	width:34%;
float: right;
}


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

#works23 #sec05 .boxL{
		width: 100%;
    margin:0 0 20px;  
      
	}
 

#works23 #sec05 .boxR {
		width: 80%;
    margin:0 10% 20px;  
}	
  

 #works23 #sec05 .boxR .beforeImg {
   width: 100%;
margin: 30px 0 0;
} 
	
#works23 #sec05 .boxL2{
		width: 30%;
    margin:20px 0 0;  
      
	}	
	
#works23 #sec05 .boxR2 {
   width: 100%;
}
  
	
}
/*----------------*/
	
#works23 #sec06 .boxL{
	width:48%;
    margin: 0 0 15px;  
}

#works23 #sec06 .boxR{
	width:48%;
    margin: 0 0 15px;
  text-align: left;
}

#works23 #sec06 .boxR .beforeImg{
 width: 60%;
  margin: 100px 0 0 40%;
}




@media screen and (max-width:767px){
#works23 #sec06 .boxL {
width:100%;
margin:0 0 20px;      
}

#works23 #sec06 .boxR{
width: 100%;
  margin: 0;
}
  
#works23 #sec06 .boxR .beforeImg {
width: 70%;
margin:0 15% 0;    
}  

}

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

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

#works23 #sec07 .boxR .beforeImg{

}

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

#works23 #sec07 .boxR{
width: 100%;
margin:0 0 0;    
}
	
	#works23 #sec07 .boxR > img{
	width: 80%;
margin:0 10% 0;  	
	}
  
#works23 #sec07 .boxR .beforeImg {
width: 100%;
margin:0 0 20px;    
}  

}




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

	
#works23 #secEnd .boxL{
	width: 64%;
}

#works23 #secEnd .boxL table{
	width: 100%;
  margin-left: 0;
  margin-top: 40px;
}

#works23 #secEnd .boxR{
	width: 29%;
	text-align: left;
  margin-left: 0;
}







@media screen and (max-width:767px){
  
#works23 #secEnd .boxL table{
  margin-top: 20px;
}


#works23 #secEnd .boxL{
		width: 100%;
    margin-bottom: 10px;  
      
	}

#works23 #secEnd .boxR {
    width: 80%;
  margin: 0 10%;
}	
  

	
}