@charset "utf-8";

@media only screen and (min-width: 768px){
	#works .inner{width: 750px ; height: auto;}
} 

.area{width: auto; background: #003597; color: #ffffff;border: 2px solid #003597; border-radius: 15px 0 0 15px;padding: 6px 13px;}
.white{border: 2px solid #003597; border-radius:0 15px 15px 0;padding: 6px 19px; background: #ffffff;}

#works .title_box{display: flex; justify-content: space-between; align-items: center; margin-bottom: 38px;}
#works .title_box h2{font-size: 36px; border-left: 10px solid #003597; padding: 12px 0 12px 30px; color:#003597; }
#works .title_box p{font-size: 14px;  display: flex; height: 30px;}
#works .title_box p  span{display: block;}

#works .cleaning h3{font-size: 36px; font-family: 'NotoSansJP-Bold'; margin-bottom: 25px;}
#works .cleaning .sentence{font-size: 16px; font-family: 'NotoSansJP-Regular'; line-height: 180%; padding: 0 0 50px; }

/* ------------------------------------------------------------.information-*/
#works .information .detail{width: auto; height: 30px; background: #003597; color: #ffffff;background  #003597; border-radius: 0 15px 15px 0;padding: 6px 13px;}

#works .information ul{margin: 14px 0 102px;}
#works .information ul li{font-size: 16px; padding: 17px 0 15px 17px; border-bottom: 1px solid #c9c9c9; font-family: 'NotoSansJP-Regular'; display: flex;align-items: center; position: relative;}
#works .information ul li:before {border-radius: 50%;width: 10px; height: 10px; display: block;position: absolute;left: 0;top: 44%; bottom: 0px; content: "";background: #003597;}
#works .information ul li:nth-child(2){padding: 18px 0 15px 17px;}
#works .information ul li:nth-child(3){padding: 27px 0 28px 17px;}
#works .information ul li:nth-child(4){border-bottom: none;padding: 6px 0 6px  17px;}
#works .information ul li .text{margin-left: auto;font-family: 'NotoSansJP-Medium';}
#works .information ul li .blue{font-size: 10px; color: #003597;}
#works .information ul li:nth-child(4) .text{font-size: 50px;font-family: 'Barlow-SemiBold';}
#works .information ul li:nth-child(4) .text .deta{font-size: 20px;	font-family: 'NotoSansJP-Bold'; color: #000000;}

/*-------------------------------------------------------------change_box-----------------------------------------------------------*/
#works .change_box ul{display: flex; margin-bottom: 40px; justify-content: space-between;align-items: center; position: relative;}
#works .change_box ul li{position: relative; width: 338px; height: auto; }
#works .change_box ul .arrow{ border-top: 4px solid #535353; border-right: 4px solid #535353; width: 40px; height: 40px; transform: rotate(45deg);position: absolute; right: 49%;}
#works .change_box ul li img{width: 100%; height: auto;}
#works .change_box ul li p{position: absolute; top: 0px; width: 142px; height: auto; color: #ffffff; border-radius: 0 0 20px 0; font-size: 24px; font-family: 'OpenSans-Medium';}
#works .change_box ul li .before{background:#b5b5b5; padding:10px 0 10px 21px; }
#works .change_box ul li .after{background:#003597; padding: 10px 0 10px 30px;}

/* ------------------------------------------------------------ other ------------------------------------------------------------ */
#other{background: url(../images/works_detail/bg_01.png) no-repeat center center; background-size: cover;padding: 80px 0; width: 100%; height: auto;}
#other h2{font-size: 36px; 	font-family: 'NotoSansJP-Bold'; text-align: center;margin-bottom: 52px;}
#other h2 span{font-family: 'Barlow-SemiBold'; font-size: 20px; color: #0d56aa;display: block; padding: 0 0 23px;}
#other .inner{display: flex; justify-content: flex-start;}
#other .inner div {position: relative; width: 320px;}
#other .inner div:nth-of-type(2) { margin: 0 70px; }
#other .inner div h3{border-left: 4px solid #003597; font-size: 26px; color: #003597; padding: 6px 0 6px 17px;}
#other .inner div p{font-size: 14px;  display: flex; height: 30px; position: absolute; top: 67%;}
#other .inner div p span{display: block;}
#other .inner div .area{width: auto; background: #003597; color: #ffffff;border: 2px solid #003597; border-radius: 0 0 0 0;padding: 6px 13px;}
#other .inner div ul{margin-top: 15px;}
#other .inner div ul li{font-size: 16px; position: relative; padding: 0 0 0 17px;}
#other .inner div ul li:nth-child(1):before{border-radius: 50%;width: 10px; height: 10px; display: block;position: absolute;left: 0;top: 30%; bottom: 0px; content: "";background: #003597;}
#other .inner div ul li:first-of-type{margin-bottom: 13px;}
#other .inner div ul li span{font-size: 10px; color: #003597;padding: 0 5px 0 0;}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
.area{width: auto; border-radius: 15px 0 0 15px;padding: 5px 22px;}
.white{border: 2px solid #003597; border-radius:0 15px 15px 0;padding: 5px 18px; background: #ffffff;}

#works .title_box{display: block;margin-bottom: 30px; }
#works .title_box h2{font-size: 25px; border-left: 8px solid #003597; padding: 7px 0 7px 15px;}
#works .title_box p{font-size: 12px;  display: flex; height: auto; margin-top: 15px;}
#works .title_box p  span{display: block;}

#works .cleaning h3{font-size: 24px; line-height: 140%;margin-bottom: 20px;}
#works .cleaning .sentence{font-size: 13px; line-height: 160%; padding: 0 0 30px; }

/* ------------------------------------------------------------.information-*/
#works .information .detail{width: auto; height: 25px; padding: 6px 10px; font-size: 13px;}

#works .information ul{margin: 10px 0 27px;}
#works .information ul li{font-size: 13px; padding: 10px 0 10px 9px; border-bottom: 1px solid #c9c9c9;  display: block;}
#works .information ul li:before{width: 5px; height: 5px; left: 0;top: 25%; bottom: 0px; ;}
#works .information ul li .text{margin-top: auto; line-height: 160%;  margin: 5px 0 0 0; width: 85%}
#works .information ul li .blue{font-size: 5px; ;}
#works .information ul li:nth-child(2){padding: 10px 0 10px 9px; }

#works .information ul li:nth-child(3){padding: 10px 0 10px 9px; }
#works .information ul li:nth-child(3):before{width: 5px; height: 5px; left: 0;top: 19%; bottom: 0px;}

#works .information ul li:nth-child(4){border-bottom: none;padding: 10px 0 10px 9px; }
#works .information ul li:nth-child(4):before{width: 5px; height: 5px; left: 0;top: 22%; bottom: 0px;}

#works .information ul li:nth-child(4) .text{font-size: 25px; line-height: 110%;}
#works .information ul li:nth-child(4) .text .deta{font-size: 12px;	}

/*-------------------------------------------------------------change_box-----------------------------------------------------------*/
#works .change_box{ }
#works .change_box ul{ margin-bottom: 40px; align-items: baseline; }
#works .change_box ul:nth-child(2){margin-bottom: 63px;}
#works .change_box ul li{position: relative; width: 45%; height: auto; }
#works .change_box ul .arrow{ width: 20px; height: 20px; top: 55%;}
#works .change_box ul li img{width: 100%; height: auto;}
#works .change_box ul li p{position: absolute; top: 0px; width: auto; height: auto;  border-radius: 0 0 10px 0; font-size: 15px; }
#works .change_box ul li .before{ padding:5px 14px; }
#works .change_box ul li .after{ padding: 5px 19px;}

/* ------------------------------------------------------------ other ------------------------------------------------------------ */
#other{padding: 40px 0; width: 100%; height: auto;}
#other h2{font-size: 20px; 	margin-bottom: 26px; }
#other h2 span{ padding: 0 0 10px; font-size: 12px;}
#other .inner{display: flex; justify-content: space-between; flex-direction: column;padding: 0 5%;}
#other .inner div img{width: 41%;  margin-right: 15px;}
#other .inner div{position: relative; display: flex;}
#other .inner div:nth-child(2){margin: 15px 0;}
#other .inner div h3{border-left: 3px solid #003597; font-size: 15px; padding: 3px 7px; order: 1;position: absolute; left: 45%;}
#other .inner div p{font-size: 11px;  display: flex; height: auto; position: absolute; top: 26%; left: 45%;order: 2;margin-top: 5px;}
#other .inner div p span{display: block;}
#other .inner div .area{width: auto; border: 2px solid #003597; border-radius: 0 0 0 0;padding: 1px 5px;}
#other .inner div .white{padding: 1px 7px;}
#other .inner div ul{margin-top: 6px;order: 3;position: absolute;left: 45%; top: 53%;}
#other .inner div ul li{font-size: 12px; padding: 0 0 0 10px;}
#other .inner div ul li:nth-child(1):before{width: 5px; height: 5px; left: 0;top: 30%; bottom: 0px; ;}
#other .inner div ul li:first-of-type{margin-bottom: 7px;}
#other .inner div ul li span{font-size: 10px; color: #003597;padding: 0 5px 0 0;}

}