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

#containerIn {
    width: 960px;
    /* margin: 118px auto 0px; */
    margin: 0 auto;
	
}

.mainArea {
    padding: 25px 15px;
    max-width: 890px;
    margin: 0 auto 50px;
}


.mainArea .readTx{
	margin: 30px 0 40px;
	
}

ul.uc {

}

ul.uc li {
	width: 31.5%;
	display:inline-block;
	margin-right: 1.8%;
	margin-bottom: 30px;

}

ul.uc li:nth-child(3n){
	margin-right: 0;
}


ul.uc a img {
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	width: 100%;
}
ul.uc a:hover img
{
opacity:0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
}



@media screen and (max-width:767px){
	
#containerIn {
    width: auto;


}
	
	
.mainArea h2 img{
	width: 100%;	
}
  

#m-hd h1 {
    font-size: 2.8vw;
}
	
.mainArea {
	padding: 0;

}
	
.mainArea .readTx{
	margin: 15px 15px 20px;
	
}
	
	ul.uc{
		width: 90%;
		margin: 0 auto;
	}
	
ul.uc li:nth-child(3n) {
       margin-right: 1.8%;
}
	
ul.uc li:nth-child(2n) {
    margin-right:0;
}	
	
ul.uc li {
    width: 48%;
    margin-bottom: 15px;
}
	
.mainArea {
    margin: 0 auto;
}
	
}

/*vol1~5*/



#containerIn .left{
    width: 710px;
	display: inline-block;

}

#containerIn .left .mainArea2 {

    box-shadow: 0px 0px 4px 1px #ccc;
    background: #FFF;
    padding: 30px 25px 30px;
    margin-bottom: 50px;


}

#containerIn .right {
    width: 220px;
    float: right;
}

#containerIn .right .mainAreaSide {
    box-shadow: 0px 0px 4px 1px #ccc;
    background: #f3f3f3;
    padding: 25px 10px 10px;
    border: #FFF 5px solid;
    margin-bottom: 30px;
    position: relative;

}

#containerIn .left .mainArea2 h2{
font-size: 1.15rem;  
margin-top: 1rem;
margin-bottom: 0.5rem;
  font-weight: bold;
/*  padding-bottom: 0.3em;
  border-bottom: 1px solid #ccc;*/
}

#containerIn .left .mainArea2 h2.mt15{
  margin-top: 15px;
}

#containerIn .left .mainArea2 .fh{
    border-bottom: none;
  }  

#containerIn .left .mainArea2 h2:first-child{
  margin: 0;
}

#containerIn .left .mainArea2 p{
	font-size: 84%;
	line-height: 1.8;
	
}

.list{
	margin: 0;
	padding: 0;
	font-size: 84%;
	line-height: 1.8;
}

.list{
	padding-left: 1em; 
    text-indent: -1em;
}

ul.ucList li {
	margin: 10px 0;
	padding-bottom: 5px;
	border-bottom: #CCC 1px dotted;
	font-size: 90%;
}

ul.ucList li a{
	    color: #004da1;

}
#containerIn .mainAreaSide .title {
    position: absolute;
    top: -13px;
    left: 5px;
}

.pager{
	text-align: center;
	margin-top: 10px;
}

.pager a{
	color:#004da1;
}

p{
	word-break:break-all;
}

p a{
	color:#004da1;	
}



@media screen and (max-width:767px){
	

	
#containerIn .left{
    width: 90%;
	margin:20px 5%;
}
	
#containerIn .left .mainArea2 > img{
		width: 100%;
}	

#containerIn .left .mainArea2 h2 img{
	width: 100%;
}	

  
#containerIn .left .mainArea2 h2{
font-size: 1rem;  
}  
  
	
	
#containerIn .right {
    width: 93.5%;
	margin: 0 3.25%;
}
#containerIn .left .mainArea2 {
    padding: 15px;
    margin-bottom: 0;
}
	
#containerIn .left .mainArea2 p{
	font-size: 100%;
	
}

#containerIn .right {
    width: 90%;
	margin:20px 5% 0;
}	

	
.list{
	font-size: 100%;

}
}

/*vol1*/

#point {
	width: 660px;
	height: 440px;
	margin: 20px 0 10px;
	background: url(../construction_report/img/01/bg_point.jpg) no-repeat;
	position: relative;
}
#point #btn1 {
	position: absolute;
	top: 74px;
	left: 15px;
}
#point #btn2 {
	position: absolute;
	top: 145px;
	left: 15px;
}
#point #btn3 {
	position: absolute;
	top: 214px;
	left: 15px;
}
#point #btn4 {
	position: absolute;
	top: 284px;
	left: 15px;
}
#point #btn5 {
	position: absolute;
	top: 75px;
	right: 12px;
}
#point #btn6 {
	position: absolute;
	top: 145px;
	right: 12px;
}
#point #btn7 {
	position: absolute;
	top: 215px;
	right: 12px;
}
#point #btn8 {
	position: absolute;
	top: 285px;
	right: 12px;
}


@media screen and (max-width:767px){
	
#point {
    width: 100%;
	background-size: 100%;
	height: 52vw;
}
	
	#point img{
		width: 87px;
		
	}	
#point #btn1 {
	position: absolute;
	top: 17%;
	left: 0;
}
#point #btn2 {
	position: absolute;
	top: 33%;
	left: 0;
}
#point #btn3 {
	position: absolute;
	top: 50%;
	left: 0;
}
#point #btn4 {
	position: absolute;
	top: 67%;
	left: 0;
}
#point #btn5 {
	position: absolute;
	top: 17%;
	right: 0;
}
#point #btn6 {
	position: absolute;
	top: 33%;
	right: 0;
}
#point #btn7 {
	position: absolute;
	top: 50%;
	right: 0;
}
#point #btn8 {
	position: absolute;
	top: 67%;
	right: 0;
}	
	
}

/*vol5*/
.center p img {
    display: block;
    margin: 0 auto;
}

.b-a{
margin-top: 10px;
}

.b-a .l {
	float: left;
	width: 47%;

}
.b-a .arw {
	float: left;
	margin: 23% 0 0 0.6em;
	    width: 2.7%;
}
.b-a .r {
	float: right;
	width: 47%;
}

.madori {
	width: 100%;
	height: 806px;
	position: relative;
	margin-bottom: 45px;
}
.madori .img1,
.madori .img2,
.madori .img3,
.madori .img4 {
	position: absolute;
}
.madori .img1 {
	top: 0px;
	left: 44%;
	width: 32%;
}
.madori .img2 {
	top: 0px;
	left: 0px;
	width: 42%;
}
.madori .img3 {
	top: 45%;
	right: 0px;
}
.madori .img4 {
	bottom: 0px;
	left: 0px;
	width: 100%;
}

.hpoint{
  margin: 2rem 0;
}

.mb50 {
    margin-bottom: 50px;
}

.mt30 {
    margin-top: 30px;
}

.mb30 {
    margin-bottom: 30px;
}

.mt15 {
    margin-top: 15px;
}

.mb15 {
    margin-bottom: 15px;
}
.mb60 {
    margin-bottom: 60px;
}

.mt25 {
    margin-top: 25px;
}

.mb25 {
    margin-bottom: 25px;
}


@media screen and (max-width:767px){
  
  #ph08{
    width: 100%;
  }  
	
.madori {
    height: 106vw;
}
	
.madori .img1 {
    top: 0px;
    left: 44%;
    width: 54%;
}
	
.madori .img3 {
    width: 68%;


}
	
.center.bt p img {
	width: 100%;

}
  
  .hpoint img{
    width: 100%;
  }  
  
}

#double{
margin-top:-82px !important;
  padding-top:82px !important;
}