/*--------------------------------------------------------
  ABOUT
--------------------------------------------------------*/
#about .cont { margin: auto; max-width: 750px;}
#about .icon { margin: 0 auto 30px; width: 300px; overflow: hidden;}
#about .icon p { float: left;  padding: 0 0.5%; width: 49%;}
#about .company h3.mid { margin: 0; padding:0 0 30px;}
#about .company h3.mid::after { display: none;}
#about .company dl {}
#about .company dt { font-weight: 600;}
#about .company dd { padding-left: 15px;}
#about .company dd + dt { margin-top: 15px;}
#about .company dt span { line-height: 30px; border-bottom: 1px solid #555;}
#about .map_btn { position: absolute; top: 10px; right: 10px; width: 80px; text-align: center; z-index: 2;}
#about .map_btn span { display: block;}
#about .map_btn span + span { margin-top: 5px;}
#about .map_btn a { display: block; padding:  0 10px; color: #fff; text-decoration: none; background: #cc0066;  border:2px solid #cc0066; transition: .3s; line-height: 140%;}
#about .map_btn span + span a { background: #005dcc !important; border:2px solid #005dcc !important;}
#about .more_btn { margin-top: 10%;}
#map { position:relative; clear:both; margin:0;}
#map iframe { width: 100%; height: 400px; border: none;}
@media only screen and (min-width:750px){
    #about .td_add { height:60px !important; }
    #about .map_btn a:hover { color: #cc0066; background: #fff;}
    #about .map_btn span + span a:hover { color:  #005dcc !important; background: #fff !important;}

}


/*--------------------------------------------------------
  SERVICE
--------------------------------------------------------*/
#service .anchor_link { padding: 50px 0 0; text-align: center;}
#service .anchor_link p { display:inline-block; padding: 0 20px;}
#service .anchor_link p a { color: #222; line-height: 30px; font-weight: 600; text-decoration: none;}
#service .anchor_link p a::after {
    display: block; clear: both; content:"";
    width: 0; height:2px;
    background: #222;
    transition: .3s;
}
#service .service_cont { position: relative; margin: auto; width: 90%; max-width:830px;}
#service .service_cont::before {
	display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 5px; height: 100%;
    background-image: linear-gradient(#48acff, #9d0fae);
}
#service .service_cont .cont { margin: auto; padding:100px 0; width: 95%; max-width:650px;}
#service h3 { position: relative; padding-bottom:15px; margin-bottom: 60px;}
#service h3 small,
#service h3 b { display: block; line-height:150%;}
#service h3 small { font-size: 125%; font-weight: 600;}
#service h3 b { font-size: 65px;}
#service h3::after {
	display: block; clear: both; content:"";
	position: absolute; left:0; bottom:0;
	margin: auto; width:130px; height:2px;
	background:#444;
}
#service .come { font-size: 105%;}
#service .service_list { margin-top:50px;}
#service .service_list p { 
    display: inline-block;
    min-width:200px;
    margin: 5px 5px 5px 0;
    font-size: 87.5%;
    line-height:30px;
    text-align: center;
    border: 1px solid #000;
    background: #fff;
}
#service .model { padding-bottom: 0 !important;}
#service .model .service_list { width: 460px;}
#service .model .service_list p:nth-child(1) { width: 449px;}
#service .btn_cont { padding: 80px 0;}
#service .model .flow { padding: 35px 0;}
#service .model .model_rei { padding: 20px; border-top: 1px solid #000; border-bottom: 1px solid #000;}
#service .model .model_rei ul { padding-bottom: 20px; overflow: hidden;}
#service .model .model_rei ul li { float: left; margin: 0 2%; padding:20px 0 20px 70px; font-size: 87.5%; line-height: 130%;}
#service .model .model_rei ul li:nth-child(1) { background: url("../../img/service_model1.png") no-repeat center left; background-size: 60px auto;}
#service .model .model_rei ul li:nth-child(2) { background: url("../../img/service_model2.png") no-repeat center left; background-size: 60px auto;}
#service .model .model_rei ul li:nth-child(3) { background: url("../../img/service_model3.png") no-repeat center left; background-size: 60px auto;}
#service .model .model_rei .come { text-align: center;}
@media only screen and (min-width:750px){
    #service .anchor_link p a:hover::after { width: 100%;}
}


/*--------------------------------------------------------
  NEWS
--------------------------------------------------------*/
#news ul li.news_box { margin: 0; padding: 30px; }
#news ul li.news_box:nth-child(odd) { background: #f6f6f6; }
#news ul li.news_box .tit { font-weight: bold; padding-bottom: 20px;}
#news ul li.news_box .tit .day { font-weight: normal; padding-right: 20px;}
#news ul li.news_box .tit a { color:#000; text-decoration: none; pointer-events: none; font-weight:500;}
#news ul li.news_box .tit a,
#news ul li.news_box .come { font-size: 105%;}

/*--------------------------------------------------------
  WORKS
--------------------------------------------------------*/
#works dl { padding: 20px; border: 1px solid #ccc; }
#works dl+dl { margin-top: 5%; }
#works dl dt {
	position: relative;
	margin-bottom: 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
}
#works dl dt .anchor {display: block; position:relative; top:-150px;}
#works dl dt p:nth-child(1) { float:left; font-size: 120%; font-weight:600;}
#works dl dt p:nth-child(2) { float:right; overflow: hidden;}
#works dl dt p:nth-child(2) span {
	float:left;
	padding: 5px 15px;
	font-size: 75%;
	color: #fff;
	line-height: 100%;
	background: #222;
}
#works dl dt p:nth-child(2) span+span { margin-left: 10px;}
#works dl dd { overflow: hidden;}
#works dl dd .works_photo { float: left; width:350px;}
#works dl dd .works_photo li img { width: 350px; height:auto; object-fit: cover;}
#works dl dd .works_photo .slick-slide { min-width: 350px; min-height: 220px;}
#works dl dd .works_photo .slick-track { min-width: 350px; min-height: 220px;}



#works dl dd .come { position: relative; float:right; width:calc( 100% - 380px );  font-size: 105%;}
#works dl dd .come .gaiyou { 
	position: absolute; bottom: 0; left: 0;
	margin-top:10px;
	padding: 10px 0 0;
	width: 100%;
	border-top:1px dotted #555;
}
#works dl dd .come .gaiyou p { overflow: hidden; line-height: 150%;}
#works dl dd .come .gaiyou p span { display: block; float: left;}
#works dl dd .come .gaiyou p span:nth-child(1) { width:130px;}
#works dl dd .come .gaiyou p span:nth-child(2)::before { margin: 0 10px 0 0 ; content:":"; color: #999;}
#works dl dd .come .gaiyou p span:nth-child(2) { display: block; float:right; width:calc(100% - 130px)}
@media only screen and (max-width:1025px){
	#works dl.txtover  dd .come .gaiyou { margin-top: 20px; position: static; height: auto;}
}
@media only screen and (max-width:880px){
	#works dl dd .come .gaiyou { margin-top: 20px; position: static; height: auto;}
	#works dl dd .come .gaiyou p  { padding-top: 7px;}
	#works dl dd .come .gaiyou p span { float: none; display: block; width: 100% !important;}
	#works dl dd .come .gaiyou p span::before { display: none !important;}
}


/*--------------------------------------------------------
  CONTACT
--------------------------------------------------------*/
#contact { margin: auto; max-width: 850px;}


/*--------------------------------------------------------
  pagination
--------------------------------------------------------*/
.pagination-container { padding-top: 40px;}
.pagination-container ul { width: 100%; display: flex; justify-content: center;}
.pagination-container li + li { margin-left: 2px; }
.pagination-container a { display: block; padding: 5px 15px; text-decoration: none; color: #000; background: #eee;}
.pagination-container .page a { color:#000;}
.pagination-container .page a:hover { color: #fff; background:#777;}
.pagination-container .prev a,
.pagination-container .next a { }
.pagination-container .prev a:hover,
.pagination-container .next a:hover { color: #fff; background:#777;}
.pagination-container .works_active a,
.pagination-container .news_active a { color: #fff; background: #000;}