﻿
section#comp {
	padding-top:6em;
	padding-bottom:6em;
}

/* **************************************************

  		　　メイン

************************************************** */

/* ********* 見出し ******** */
h2.leftbar {
	position:relative;
	text-align:left;
	margin-bottom:1.5em;
	padding-left:3em;
	font-size:1.1em;
	color:#0071b6;
}
h2.leftbar::before {
	content:'';
	position:absolute;
	left:0;
	top:30%;
	height:40%;
	border-left:2.5em solid #0071b6;
}

/* ********* 優良産廃処理業社一覧ページ ******** */
div#comp_pdf a {
	color:#29a5dc;
	text-decoration:none;
	font-weight:bold;
	font-size:1.2em;
}
div#comp_pdf a:hover {
	color:#ff7500;
}

/* 許可の種類 */
#comp h3 {
	width:21.2%;
	margin-top:2em;
	text-align:left;
}
#comp h3 img {
	width:100%;
	height:auto;
	max-height:1.5em;
}
.perm_group {
	display:flex;
	width:100%;
	font-size:0.9em;
	margin-top:2em;
}
.perm_group h4 {
	flex-basis:10em;
}
.perm_group ul {
	flex-grow:1;
	display:flex;
	flex-wrap:wrap;
}
.perm_group ul li {
	flex-basis:50%;
	text-align:left;
	display:flex;
	align-items:center;
	font-weight:bold;
	margin-bottom:1em;
	padding-right:1em;
}
.perm_group ul li img {
	width:2em;
	height:auto;
	margin-right:1em;
}

/* 会社ロゴ一覧 */
ul.comp_logo {
	display:flex;
	flex-wrap:wrap;
	width:100%;
	border-top:1px solid #808080;
	border-left:1px solid #808080;
	margin:2em 0;
    
}
ul.comp_logo > li {
	width:100%;
	flex-basis:50%;
	border-bottom:1px solid #808080;
	border-right:1px solid #808080;
	display:flex;
	flex-direction:column;
	padding:1em 1em 1em;

}
ul.comp_logo > li .logo_img img {
	width:100%;
	height:20vh;
	margin:0 auto 0em;
}

/* A・B・C・D */
.perm_mark {
	margin:0 0 0em 0;
}
.perm_mark ul {
	display:flex;
	justify-content:flex-end;
}
.perm_mark ul li {
	width:15%;
	height:auto;
	max-width:30px;
	margin:0 0 1% 1%;
}
.perm_mark ul li img {
	width:100%;
	height:auto;
}


/* **************************************************

　　　　　　　　　　CSS振り分け

************************************************** */
@media only screen and (min-width: 640px) {

	/* 業者一覧ページのレイアウト変更 */
	.perm_group ul {
	}
	.perm_group ul li {
		flex-basis:auto;
		padding-left:3%;
	}
	.perm_flex {
		display:flex;
		width:100%;
		margin-top:3em;
	}
	#comp h3 {
		margin:0;
	}
	.perm_flex h3 {
		flex-basis:auto;
		line-height:3em;
	}
	.perm_right {
		width:100%;
	}

	/* 業者ロゴのレイアウト変更 */
	ul.comp_logo > li {
		flex-basis:25%;
	}

	/* PC用に見出しバーのデザイン調整 */
	:root {
		--h2long:0px;
	}
	h2.leftbar {
		font-size:2em;
		padding-left:calc((100vw - var(--base-width))/2  + var(--h2long) + 1em);
	}
	h2.leftbar::before {
		border-left:calc((100vw - var(--base-width))/2  + var(--h2long)) solid #0071b6;
	}




}
