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

/*===============================================
●style.css 画面の横幅が768px 以下
===============================================*/
	
@media only screen and (min-width: 768px){
.none_pc {display:none}
}

@media only screen and (max-width: 768px){
.none {display:none}
.bx-wrapper { margin-bottom: 0px; }	
	
/*メインCSS*/
.main_in { width:95%; margin:auto;}
.two_box{ width: 100%; height: auto; margin: 0 auto; padding-left: 0%}
.two_box p{font-size:14px; line-height: 24px; margin: 5% auto 0; padding: 1%;}

.box60{ width:100%; height:auto; float:none;}
.box40{ width:100%; height:auto; float:none;}
.box40 img { margin: auto;}
.font_b{ font-size: 16px; font-weight: bold; line-height: 23px; margin-top: 8%; display: block;}.font_m{ font-size: 16px; color: #fff; text-align: center; margin-top: 5%;}
.font_ll{ font-size: 24px; color: #fff; text-align: center; margin: 4% 0;}	
	
h1{ width:100%; height:20px; font-size:20px; text-align:center; margin-top:10px;}
h2{ width:100%;   font-size:28px; text-align:center; margin:7% auto 3%;　text-align: center; line-height: 30px; padding: 2%;}
h3{ width:100%;  font-size:20px; text-align:center; margin:10% 0 7% 0;　text-align: center; line-height: 1.8em; padding: 2%;}	
	.box60 h3{ margin: 8% auto 3%;}
		

/*ヘッダーここから */
.nav{ margin-top: 0; }
.top { width: 100%; height:auto; min-height:200px;  position: absolute; top:5%; z-index: 1;}
.top h1{ margin-top: 0;}
.top .job{ width: 80%; height: 30%; text-align: center; color: #333; background-color: #fff; padding: 2%; margin: auto; font-size: 12px;}
.top .name{ font-size: 24px; text-align: center; width: 100%; margin: 10% auto 5%; color: #fff;}

.top_info { width: 100%; height: auto; margin: 0 auto 6%; background-color: #F7F7F7; padding: 3% 0;}
.top_info .info_ttl{ background: none; width: 270px; height: auto; margin: 4% auto; padding-bottom: 2%; }
.top_info .info_ttl p{ font-size : 16px; padding: 4% 0 0 13%;}
	.top_info .info_ttl img{ float: left;}
.top_info .red { width: 100%; height: auto; margin:2% auto;  text-align: center;  color : #ED1C24; font-size: 16px;}
.top_info .tel { width: 100%; height: auto; margin: 0% auto;  text-align: center; font-size: 14px; line-height: 24px;}
.tel span {font-size: 28px; font-weight: bold; margin-right: 0;}
	.tel img{ float: left;}
.sp_boder{ display:block;height:1px; border:0; border-top:30px solid #0071bc; margin:0 0 3em 0; padding:0;}	
	
/*ヘッダーここまで */	
	
/*info・フッターここから */
.info{ margin: 0 auto; width: 100%; height: auto;}
.info p{font-size:10px; line-height: 26px; margin: auto; width: 100%; text-align: center;}
.info_r { width: 100%; margin: auto; float: none;}
.info_r li{ margin: auto; text-align: center;}
.info_map { width:100%; height: auto; float:none; margin: auto; padding-left: 5%;}
.info_map img{ margin: auto;}
.tel { width: 100%; height: auto; margin: 5% auto;  text-align: center; font-size: 14px; line-height: 5px;}	
.info_r .tel { width: 100%; height: auto; margin: 0 auto;  text-align: center; font-size: 14px; line-height: 28px;}	
.red { width: 100%; height: auto; margin:2% auto;  text-align: center;  color : #ED1C24; font-size: 14px;}
.info_ttl{ background: url(../image/icon_01.png) no-repeat left; width: 270px; height: auto; margin: 0 auto 6%;}
.info_ttl p{ font-size : 16px; padding: 2% 0 0 14%;}
.tel { width: 100%; height: auto; margin: 5% auto;  text-align: center; font-size: 14px; line-height: 5px;}
.tel a{ color: #333;}

.area{ width: 300px; height: 50%; border: dotted 1px #333; background: url(../image/area.png) no-repeat left; padding: 4%; margin: 7% auto;}
.area p{ width: 44%;  font-size: 12px; color: #666; margin-left: 57%; line-height: 20px;}
.info_number{  width: 100%; padding: 0 0 10% 0;}

#footer{ width: 100%; height: auto; background-color: #0071bc;}
#foot_com{ font-size: 12px; color: #fff; width: 100%; float: none; border-right: none; margin: 0 auto; padding: 2%;}
.name{ font-size: 22px; margin: 15px auto 15px; width: 300px; text-align:center;}
#copyright { font-size: 10px; color: #fff; width: 100%; position: relative; left: 0; text-align:center; margin: 5% auto; padding: 0; line-height: 15px; display: inline-block;}
.address{width: 290px; margin: 4% auto 0%; line-height: 18px; padding-left: 0%}
.address li:nth-child(even){ margin: 0 0 5% 17%;}
	.job{ margin: auto;}
.sitemap{ width: 100%; height: auto; min-height:inherit; float: none; margin: 5%;}
.f_menu { width: 33.3% !important; font-size: 1.4rem; color: #fff; line-height: 30px; float: left;}
.f_menu li { display:none; }
.f_menu li:first-child { display:block; }



/*info・フッターここまで */

	
/* トップページ */
.bg-holder { width: 100%; max-height: 100px; background-size: cover; background-position: 50%;}
.bg_pic { background-image: url('../image/top_pic02.jpg'); }

.teiki { width: 100%; height: auto; margin: auto; padding-left: 0%;}
.teiki ul { margin: auto; }
.teiki li { float: none;}
.teiki li img { margin: auto; width: 95%;}
.teiki li:nth-child(even) { position: relative; top: 0px; padding: 0 2px;}
	.teiki .arrow:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent;
    border-top-color: #666;
    top: 0%;
    left: 50%;
	margin-left: -10px;	}
.arrow{ width: 100%; height: 10px; margin: 3% auto; display: block;}
	

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

.point_ttl{ width: 100%; margin: 15% auto 0; }
.point_ttl img {margin: auto; width: 100%;}
.point_box { background: #f2f2f2; padding: 5%; width: 100%; height: auto;}
.p_box{ width: 100%; height: auto; margin: 5% auto; padding-left: 0;}

dl{ font-size:26px; color : #0071BC; width :100%; margin-right : 12px; padding : 5% 1% 10%; float : none;}
dt{ text-align: center; font-size:26px; color : #0071BC; padding-bottom : 3%; }
dd {color : #333; font-size:14px; line-height: 24px; padding-left : 10px; padding-right : 10px; }
dt img{ margin-bottom : 6%; display : block; width:100%; }
	
	
/*下層ページ共通CSS*/
.txt{width: 100%; height: auto; margin: 0 auto 5%; font-size:14px; line-height: 26px; display: block; }
.lr{ font-size: 14px; margin: 5% auto 10%; line-height: 25px;  padding-right: 0px; display: block;}
.contact_table{ width:100%; height: 330px; background-color: #f2f2f2; }
.table_l{ width: 100%; height: 120px; border-right:none; float: none; margin-top: 5%; padding: 5%;}
.table_l p{ font-size: 16px; text-align: center; margin: 5% auto 0; line-height: 20px;}
.table_tel{ width: 100%; height: 40px; font-size: 30px; padding: 0 0 0 15%; margin: 3% 10%;  background: url(../image/table_tel.png) no-repeat left; }
.table_tel a{ color: #333;}
.table_tel img{float: left; margin-right: 10px;}
.table_r{ width: 200px; height: auto; margin: 24% auto; float: none; display: block;}
.table_r li{ float: none; margin: 8% auto; }
.time{ width: 100%; height: auto; background-color: #858585; margin: 5% auto 0; padding: 2%; text-align: center; color: #fff; font-size: 14px; line-height: 20px; /* 角丸テーブル */ border-radius: 10px 10px 10px 10px;}

/*パンくず*/
.topicpath { width: 100%; margin: auto; text-align: center; margin: 8% auto;}
.topicpath ol li { width: 30%; text-align: center; /* liを横並び＆ブレットを消す */	display: inline; list-style-type: none; font-size: 14px; line-height: 20px;}

/*下層ページヘッダー*/
.underlayer_head{ width: 100%; height: 85px;}
.logo{ float: none; width: 100%; margin-top: 5%;}	
	
.btn_box_wor{ width: 100%; margin: 40px auto 50px; display: grid;}
.btn_box_com{ width: 100%; margin: 20px auto 50px; display: grid;}
	
.wor .btn_on { width: 28%;}
.btn_on { width: 40%; height: 40px; background-color: #009245; border: solid 1px #009245; float: left;}
.btn_on p{ color: #fff; font-size: 14px; text-align: center; padding: 8%; }

.btn_off { width: 40%; height: 40px; background-color: #fff; border: solid 1px #009245; float: left;  }
.wor .btn_off { width: 28%; }
.btn_off p{ color: #009245; font-size: 14px; text-align: center; padding: 8%;}
.btn_off a{display: block;}
.btn_off:hover {background-color: #0085c7; border: solid 1px #fff; float: left;  }
.btn_off p:hover{ color: #fff;}

.btn_box_com ul li{ margin: 0 0 0 7% ; width: 40%;}
.btn_box_com ul li:last-child{ margin-right: 0px; }
.btn_box_wor ul li{ margin-right: 2%; width: 32%;}
.btn_box_wor ul li:last-child{ margin-right: 0px; }

	
.btn-5 {
  position: relative; top: 0px;
  height: 35px;
  margin: 3% auto;
  box-shadow: none;
  display: block;
  outline: none;
  outline-color: none;
  outline-offset: 0px;
  text-shadow: none;
  transition: none} 
.btn-5:hover {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px; text-shadow: 1px 1px 2px #427388; }
.btn-5 a{ font-size: 16px; display: block;  padding:2% 0 2% 7%;}

/*下層ページヘッダーここまで*/
	
/*業務案内*/
.go_recycle { background-color: #f2f2f2; width: 100%; height: auto; padding-bottom: 6%; margin-top: 5%;}
.go_recycle ul{ width: 90%; margin: auto;}
.go_recycle li{ float: none; margin: auto; padding-top: 5%;}
.go_recycle li:first-child{ font-size: 14px; text-align: center; padding-top: 6%; margin-right: 0px; }
.go_recycle li img{ margin: auto;}

.r_p{ padding-left: 0px; margin-top: 10px; }
.r_txt{ font-size: 14px; line-height: 26px; padding-top: 30px; display: block;}
	
/*会社概要・沿革*/
table , td, th { border-bottom: 1px solid #666; border-collapse: collapse;  width: 100%;}
table , td, th:first-child{ border-top: 1px solid #595959; }
td, th { padding: 2%; width: 30px; height: auto; font-size: 14px; line-height: 25px; vertical-align: middle;}
td { background: #fff;}

.t1_even { background: #e9f2f4; width: 30%; text-align: center;}
.t2_even { background: #dcefe4; width: 30%; text-align: center;}
.t3_even { background: #f4e4e4; width: 30%; text-align: center;}
.odd {background: #fff; widows: 80%;}

.com_bg{ width: 100%; height: 240px; background: url(../image/company_bg.jpg) no-repeat; background-size:100% auto;}
.go_greeting{ width: 75%; height: 45%; margin: 50px auto 0; border: solid 1px #009245; background-color: #fff; position: relative; top: 28%;}
.go_greeting a{display: block; color: #009245;}
.go_greeting p{ font-size: 16px; text-align: center; padding: 16px; color: #009245;}


/*代表あいさつ*/
.greeting{ background: none; width: 100%; height: auto;}
.greeting p{ font-size: 14px; line-height: 27px; width: 100%; height: auto; padding: 0 0 0 1%; }
.ceo_mame{ font-size: 28px; position: relative; left: 25%; width: 125px; margin: auto;line-height: 0; display: block;}
.ceo{ font-size: 14px; position: relative;left: 18%; width: 70px; margin: auto;line-height: 0; display: block;}
.greeting img{ width: 100%;}
.label_gy{ width: 90%; height: auto; float:none; background-color: #009245; padding: 7px; font-size: 14px; color: #fff; margin: 10px auto; display: block; text-align: center;}
.rinen { line-height: 22px; margin: 0 auto 10px; display: inline-block;}
.rinen p{ padding: 5%;}
.rinen p:last-child{ padding-top: 5%;}	
	
/*リサイクル*/
.recycle_item{ width: 100%; height: auto; background: #f2f2f2; margin: 5% auto 0; padding: 2%}
.recycle_item img{ margin: auto; height: auto; }
.item_list{ margin: 35px 0 25px 0;}
.item_list li:nth-child(1){ width:100%;  float: none;}
.item_list li p{ font-size: 14px; padding: 4% 7%; line-height: 23px; margin-bottom: 5%;}
.label_g{ width: 90%; height: auto; background-color: #008859; padding: 10px; font-size: 14px; color: #fff; margin:7% auto 3%; display: block; text-align: center;}
.label_b{ width: 90%; height: auto; background-color: #0097d1; padding: 10px; font-size: 14px; color: #fff; margin: 3% auto; display: block; text-align: center;}	
.item_list img{ margin-top: 5%;}	
	




/*SP navi用ここから */
.nav_sp{ width: 100%; height: 108px; background-color: rgba(0,113,188,0.8); margin-bottom: 5%; }	
.nav_sp li{ width: 50%; float: left; text-align: center;  float:left; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.nav_sp li:nth-child(odd) { border-right: solid 1px #fff;  border-bottom: solid 1px #fff;}
.nav_sp li:nth-child(even) {border-bottom: solid 1px #fff;}
.nav_sp a{display: block; height: 35px;  padding-top: 13px;}

/*SP navi用ここまで */	
	
	
}