@charset "utf-8";
/* レスポンシブ設定 */
@media screen and (max-width: 640px) and (min-width: 0px){
	/* 枠大きさ */
	.column1,
	.column2,
	.column3,
	.multicolumn{
		width:90%;
	    margin:0 auto;
	    overflow:hidden;
	    }
	/* 2カラム */
    .column2 .left,
	.column2 .right{
        width: 100%;
	    float:none;
        }
	.column3 .one{
		width:100%;
		float:none;
		}

	/* ヘッダー */
	header{ background:#eee; border-top:1px solid #ccc; border-bottom:10px solid #333;}
	.header_inner{ padding:20px 0;}
	.headtxt{ margin:0 auto; text-align:center;}
	#logo a{ width: 100%; height:80px; background-size:contain; background-position:center;}
	#tel{ display:none;}
	#contact{ margin:0 auto; text-align:center;}
	#contact a:nth-child(1),
	#contact a:nth-child(2){ display:none;}

	/* TOPページ */
	.overview #contents1,
	.overview #contents2,
	.overview #contents3{ width :100%;}

	.overview #contents4 h2,
	.overview #contents5 h2{ padding-top:15px;}

	/* フッターロゴ */
	 #footer-inner{ width:90%; margin: 0 auto; padding-bottom:25px; position:relative; _zoom: 1; overflow: hidden; }
	 footer .logo{ float:none !important;}
	 footer .photo{ display:none;}
	 footer #footright{ overflow:hidden; width:90%; margin:0 auto;}
	 footer .footertel img{ display:none;}
	 footer .btn01{ width:50%;}
	#footlogo{ float:left;}
	#footsocial{ margin:10px auto;}
	#footright-inner{ overflow:hidden;}

	/* フッターナビ */
	#footnav ul li a{
		display:block;
		width:calc((100% - 3px) / 2);
		float:left;
		border-left:1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:10px 0;
	}
	#footnav ul li:nth-child(odd){ background:#f0f0f0;}
	footer #group{ margin-top:30px; text-align:left;}


	/* メインスタッフ写真陳列 */
	div.staffbox .staffimg{
		overflow:hidden;
		width:100%;
		margin-bottom:15px;
		margin:0 auto 20px auto;
		text-align:center;
		}
	.staffbox .staffimg .staffimg_pctb{ display:none;}
	.icon_ceo,
	.icon_chief,
	.icon_large,
	.icon_normal,
	.icon_support,
	.icon_class{ background:none;}

	/* スタッフ写真陳列 */
	.multicolumn_wrap > .meister{
		width:48%;
	    }
	.multicolumn_wrap > .meister:nth-child(2n){
		margin-right:0px;
		}
	.multicolumn_wrap > .meister:nth-child(2n+1){
		margin-right:10px;
		}
	#company_page .column2 .ceoimg{
		float:none;
		}
	/* 代表あいさつ */
	#ceo .column2 .left2{
		width:100%;
		float:none;
		}
	#ceo .column2 .right2{
		float:none;
		}
	table.company th,
	table.company td{
		font-size:80%;
		}
	/* アクセス地図 */
	.googlemap{
		width:100%;
		height:300px;
		margin:0 auto;
		}
	/* 実績一覧 */
	table.achievement table{ font-size:11px;}
	/* 募集ボタン */
	#rtopic a{
		background-color: #D93600;
		position: fixed;
		bottom: 0;
		width: 100%;
		filter: drop-shadow( 5px 5px 5px rgba(0,0,0,0.6));
		padding: 1rem;
		display: block;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		z-index: 99;
		transition: all 300ms linear;
		text-align: center;
	}
	#rtopic a:hover{
		background-color: #8C2300;
	}
}

@media screen and (max-width: 959px) and (min-width: 641px){
	/* 枠大きさ */
	.column1,
	.column2,
	.column3,
	.multicolumn{
		width:90%;
	    margin:0 auto;
	    overflow:hidden;
	    }
	/* 2カラム */
    .column2 .left,
	.column2 .right{
        width: 100%;
	    float:none;
        }
	.column3 .one{
		width:48%;
		}
	.column3 .one:nth-child(2n){
		margin-right:10px;
		margin-left:10px;
		}
	/* ヘッダー */
	header{ background:#eee; border-top:1px solid #ccc; border-bottom:10px solid #333;}
	.header_inner{ padding:20px 0;}
	.headtxt{ margin:0 auto; text-align:center;}
	#logo a{ width: 100%; height:100px; background-position:center;}
	#tel{ display:none;}
	#contact{ margin:0 auto; text-align:center;}
	#contact a:nth-child(1),
	#contact a:nth-child(2){ margin-right:10px;}

	/* TOPページ */
	.overview #contents1,
	.overview #contents2,
	.overview #contents3{ width :100%;}

	.overview #contents1{ background:url(../images/common/index_overview1b.jpg) no-repeat right; background-size:contain;}
	.overview #contents2{ background:url(../images/common/index_overview2.jpg) no-repeat right; background-size:contain;}
	.overview #contents3{ background:url(../images/common/index_overview3.jpg) no-repeat right; background-size:contain;}

	/*
	.overview #contents4{ background:#eee url(../images/staff/bg_dummy.jpg) no-repeat; background-size:cover;}
	.overview #contents5{ background:#eee url(../images/staff/bg_dummy2.jpg) no-repeat; background-size:cover;}
	 */

	.overview #contents4 .txt,
	.overview #contents5 .txt{ margin:0; width:98%;}

    .overview .txt{
		margin:0 !important;
		width:45%;
		background:#fff;
		padding:15px 30px !important;
		}

	.overview .txt p,
	.overview .txt h2{ text-align:left !important;}

	.overview #contents1,
	.overview #contents2{ border-bottom:1px solid #ccc;}

	.overview #contents1 img,
	.overview #contents2 img,
	.overview #contents3 img{ display:none;}

	/* お知らせ */


	 /* フッターロゴ */
	 #footer-inner{ width:90%; margin: 0 auto; padding-bottom:25px; position:relative; _zoom: 1; overflow: hidden; }
	 footer .logo{ width:250px;}
	 footer .photo{ display:none;}
	 footer #footright{ overflow:hidden; width:90%; margin:0 auto;}
	 footer .footertel img{ display:none;}
	 footer .footertel .btn01{ width:50%;}
	#footlogo{ float:left;}
	#footsocial{ float:right; margin-top:20px; margin-right:10px;}
	#footright-inner{ overflow:hidden;}

	/* フッターナビ */
	#footnav ul li a{
		display:block;
		width:calc((100% - 3px) / 3);
		float:left;
		border-left:1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:10px 0;
	}
	#footnav ul li:nth-child(odd){ background:#f0f0f0;}
	footer #group{ margin-top:30px;}

	/* 業務内容 */
	#service .one:nth-child(2n+1){ clear:left;}
	 /* キンソウ安全協力会 */
	.professional .column2 .left2{
		width:30%;
		}
	.professional .column2 .right2{
		width:65%;
		}
	/* メインスタッフ写真陳列 */
	.staffbox_txt{
		float:right;
		width:65%;
	    }
	.column2 .staffbox .staffimg{
		float:left;
		width:30%;
		max-height:300px;
	   }
	.column1 .staffbox .staffimg{
		float:left;
		width:30%;
		}
	.staffbox .staffimg .staffimg_sp{ display:none;}
	/* スタッフ写真陳列 */
	.multicolumn_wrap > .meister{
		width:32%;
	    }
	.multicolumn_wrap > .meister{
		margin-right:10px;
		}
	.multicolumn_wrap > .meister:nth-child(3n){
		margin-right:0px !important;
		}
	/* 代表あいさつ */
	#ceo .column2 .left2{
		width:70%;
		}
	#ceo .column2 .right2{
		width:25%;
		min-height:300px;
		}
	/* アクセス地図 */
	.googlemap{
		width:100%;
		height:400px;
		margin:0 auto;
		}
	/* 実績一覧 */
	table.achievement table{ font-size:11px;}
	
		/* 募集ボタン */
		#rtopic a{
			background-color: #D93600;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			text-orientation: upright;
			position: fixed;
			top: 20vw;
			right: 0;
			border-radius: 10px 0 0 10px;
			filter: drop-shadow( 5px 5px 5px rgba(0,0,0,0.6));
			padding: 1rem;
			display: block;
			color: #fff;
			font-weight: bold;
			text-decoration: none;
			z-index: 99;
			transition: all 300ms linear;
		}
		#rtopic a:hover{
			background-color: #8C2300;
			padding: 1rem 1.5rem;
		}
}

@media screen and (min-width: 960px){
	/* 表示削除 */
	.resp{ display:none;}
	/* 枠大きさ */
	.column1,
	.column2,
	.column3,
	.multicolumn{
		width:980px;
	    margin:0 auto;
	    overflow:hidden;
	    }
	.column3 .one{
		width:32%;
		}
	.column3 .one:nth-child(3n-1){ margin-right:10px; margin-left:10px;}
	/* ヘッダー */
	.header_inner{ width: 980px;}
	#logo a{
	 float:left;
     width: 250px;
	 height: 70px;
	 background-size:250px 70px;
	 margin: 17px 0 !important;
	}
	header #group{ float:right;}
	footer #group{ margin-top:10px;}

	#contact{ float:right;}
	#contact a{ float:right; margin-right:20px;}
	#tel{ width:30%; float:right;}

	/* TOPページ */
	.overview #contents1,
	.overview #contents2,
	.overview #contents3{
	    float:left;
		width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
		width : -webkit-calc((100% - 2px) / 3) ;
		width : calc((100% - 3px) / 3) ;
		}
	.overview #contents4,
	.overview #contents5{ padding:25px 0;}
	.overview #contents4{ background:#eee url(../images/common/index_overview_bg.jpg) no-repeat  left bottom;}
    .overview #contents5{ background:#eee url(../images/common/index_overview5b_bg2.jpg) no-repeat  right top;}

	/* お知らせ */
	.news dl dt{ width:20%; float:left;}
	.news dl dd{ width:70%;float:left;}

	 /* フッターロゴ */
	 #footer-inner{width: 980px; margin: 0 auto; position:relative; _zoom: 1; overflow: hidden; }
	 footer .logo{ width:250px;}
	 footer .photo{ border:3px solid #fff;}
	 footer #footleft{ width:50%; float:left; border-right: 1px dotted #999; padding-right:20px;}
	 footer #footright{ width:45%; float:right; overflow:hidden;}
	#footlogo{ float:left;}
	#footsocial{ float:right; margin-top:20px; margin-right:10px;}
	#footright-inner{ overflow:hidden;}
	footer .footertel .btn01{ display:none;}

	/* フッターナビ */
	#footnav ul{ width:980px; padding:10px 0;}
	#footnav ul li a{ border-right:1px solid #ddd; padding:0 20px;}

	 /* 業務内容 */
	#service .one:nth-child(3n+1){ clear:left;}
	 /* キンソウ安全協力会 */
	.professional .column2 .left2{
		width:30%;
		}
	.professional .column2 .right2{
		width:65%;
		}
	/* メインスタッフ写真陳列 */
	.staffbox_txt{
		float:right;
		width:65%;
	    }
	.column2 .staffbox .staffimg{
		float:left;
		width:30%;
		max-height:375px;
		}
	.column1 .staffbox .staffimg{
		float:left;
		width:30%;
		}
	.staffbox .staffimg .staffimg_sp{ display:none;}
	/* スタッフ写真陳列 */
	.multicolumn_wrap > .meister{
		width:19%;
	    }
	.multicolumn_wrap > .meister{
		margin-right:10px;
		}
	.multicolumn_wrap > .meister:nth-child(5n){
		margin-right:0 !important;
		}
	/* 代表あいさつ */
	#ceo .column2 .left2{
		width:65%;
		}
	#ceo .column2 .right2{
		width:30%;
		}
	/* 採用写真位置 */
	.recruit_photo_l{
		width:400px;
		float:left;
		margin:20px 20px 20px 0;
		}
	.recruit_photo_r{
		width:400px;
		float:right;
		margin:20px 0 20px 20px;
		}
	/* アクセス地図 */
	.googlemap{
		width:100%;
		height:560px;
		}
		/* 募集ボタン */
		#rtopic a{
			background-color: #D93600;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			text-orientation: upright;
			position: fixed;
			top: 20vw;
			right: 0;
			border-radius: 10px 0 0 10px;
			filter: drop-shadow( 5px 5px 5px rgba(0,0,0,0.6));
			padding: 1rem;
			display: block;
			color: #fff;
			font-weight: bold;
			text-decoration: none;
			z-index: 99;
			transition: all 300ms linear;
		}
		#rtopic a:hover{
			background-color: #8C2300;
			padding: 1rem 1.5rem;
		}
}




@media ( min-width : 640px ){
	/* 沿革タイムライン */
	.timeline > li {
		overflow: hidden;
		margin: 0;
		position: relative;
		padding-bottom: 15px;
		}
   .timeline-date {
		width: 110px;
		float: left;
		}
	.timeline-content {
		width: 75%;
		float: left;
		border-left: 5px #ccc solid;
		padding-left: 30px;
		}
}