section#about {
	padding-top:3.5em;
}
section#banner ,
section#contact {
	padding-top:6em;
}

/* 背景画像fixed（iPhone対応） */
body#index::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-transform: translate3d(0, 0, -1px);
	transform: translate3d(0, 0, -1px);
	width: 100%;
	height: calc(100vh - 3rem);
	z-index: -9999;
	transform:translate3d(0,0,0); //ここを追記
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	background:url('img/main_bg_pc.jpg') no-repeat center 3rem;
	background-size:cover;
	padding-top:3rem;
}

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

  		　　メインTOP

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

#main_img {
	position:relative;
	height:100vh;
}

#main_text {
	height:100vh;
}

/* ********* ちゃんと考えよう 産廃のこと 環境のこと 未来のこと ******** */
#main_text1 {
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width:auto;
	height:51.4%;
}

/* ********* 優良産廃処理業者認定制度 ******** */
#main_text2 {
	position:absolute;
	bottom:5%;
	left:50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	width:auto;
	height:5%;
	max-width:80%;
}

/* 優良産廃処理業者認定制度とは */
#about_img {
	text-align:left;
	margin-bottom:2em;
}
#about_img img {
	width:77%;
}

/* もっと詳しく（マウスオーバーで拡大） */
.more {
	text-align:right;
}
.more span {
	display:inline-block;
}
.more span a {
	color:#0071b6;
	font-weight:bold;
	text-decoration:none;
}
.more span img {
	width:1.4em;
	height:1.4em;
	margin-left:0.7em;
	vertical-align:top;
}
.more span:hover img {
	transition: all .2s ease-out;
	transform: scale(1.2,1.2);
	opacity:1;
}


/* 業者リスト・インタビュー・漫画のバナー */
section#banner ul {
	display:flex;
	flex-wrap:wrap;
	align-items:baseline; 
}
section#banner ul li {
	position:relative;
	padding-bottom:1px;
}
.banner_list ,
.banner_voice {
	flex-basis:50%;
}
.banner_manga {
	flex-basis:50%;
	width:50%;
}
section#banner ul li.banner_list::after ,
section#banner ul li.banner_voice::after {
	content:'';
	display:block;
	padding-top:100%;
}
section#banner ul li.banner_manga::after {
	content:'';
	display:block;
	padding-top:100%;
}
section#banner ul li a {
	position:absolute;
	left:0;
	top:0;
}
section#banner ul li:hover img {
	opacity:1;
}

/* 一番下にくる画像 */
section#banner ul li:hover .hidden_banner {
	display:none;
}
.hidden_banner {
	text-align:center;
	font-weight:bold;
	text-decoration:none;
	width:100%;
	height:100%;
	position:relative;
}
.banner_voice .hidden_banner ,
.banner_manga .hidden_banner {
	color:#fff;
}
.banner_list .hidden_banner {
	color:#0071b6;
}
/* こちら */
.kotira {
	width:100%;
	position:absolute;
	bottom:2%;
	left: 50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	line-height:1.2em;
}
.kotira img {
	width:1.2em;
	height:1.2em;
	margin-left:0.7em;
}
/* ２番目の画像 */
.kotira_btn {
	text-align:center;
	font-weight:bold;
	text-decoration:none;
	width:100%;
	height:100%;
	position:relative;
}
/* こちら（マウスオーバーで拡大） */
.kotira_hover {
	width:100%;
	position:absolute;
	bottom:2%;
	left: 50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	line-height:1.2em;
}
.kotira_btn img {
	width:1.2em;
	height:1.2em;
	margin-left:0.7em;
}
.kotira_btn:hover img {
	transition: all .2s ease-out;
	transform: scale(1.2,1.2);
	opacity:1;
}
.kotira_btn span {
	color:#fff;
}

/* ********* 内容 ******** */
section#intro .cont_inner img ,
section#what .cont_inner img ,
section#end .cont_inner img {
	margin:0em auto 4em;
}
section#intro .cont_inner p ,
section#what .cont_inner p ,
section#about .cont_inner p ,
section#pub .cont_inner p ,
section#end .cont_inner p ,
section#contact .cont_inner p {
	font-size:0.95em;
	margin-bottom:2em;
}

/* ********* 会社一覧へのリンク ******** */
#company_link {
	font-size:1.3em;
	font-weight:bold;
}
#company_link a {
	color:#0071b6;
	text-decoration:none;
}
#company_link a:hover {
	color:#ff7500;
}

.what_bg {
	margin-bottom:4em;
}

/* PDFバナー */
ul.about_list li {
	margin-bottom:1.5em;
	position:relative;
	display:block;
}
ul.about_list li img {
	width:100%;
	height:36.66vw;
	object-fit:cover;
	border:1px solid #c9c9c9;
}
ul.about_list li span.pdf_text {
	position:absolute;
	bottom:1px;
	left:1px;
	background:rgba(255,255,255,0.81);
	padding:0.5em;
	z-index:21;
	color:var(--color3);
	font-weight:bold;
	font-size:1.1em;
}
ul.about_list li span.pop_link {
	display:none;
}

/* PDFバナー：hover */
ul.about_list li:hover span.pop_link {
	position:absolute;
	content:'';
	background:rgba(0,104,55,0.5);
	width:100%;
	height:100%;
	z-index:20;
	top:0;
	left:0;
}
ul.about_list li:hover span.pop_link {
	display:block;
}
ul.about_list li:hover span.pop_link a {
	position:absolute;
	top:50%;
	left:50%;
	z-index:22;
	transform: translate(-50%, -50%);
	color:#006837;
	font-size:0.8em;
	background:#fff;
	font-weight:bold;
	text-decoration:none;
	padding:0.5em 1em;
}
ul.about_list li:hover span.pdf_text {
	background:rgba(255,255,255,0);
	color:#fff;
}

/* さんぱいくん：産廃情報ネット */
div.sanpaikun {
	text-align:center;
}
div.sanpaikun img {
	width:52.5%;
	height:auto;
	margin:0 auto 0.5em;
}
div.sanpaikun a {
	text-decoration:none;
	color:#000;
}
div.sanpaikun a:hover {
	color:#ff7500;
}

/* ********* お問い合わせフォーム ******** */

/* お問い合わせ */
h2.leftbar_contact {
	position:relative;
	text-align:left;
	margin-bottom:2em;
	padding-left:3em;
	font-size:1.1em;
	color:var(--color6);
}
h2.leftbar_contact::before {
	content:'';
	position:absolute;
	left:0;
	top:30%;
	height:40%;
	border-left:2.5em solid var(--color7);
}

#contact_form {
}
#contact_form dl {
	margin:auto;
}
#contact_form dl div {
	margin-bottom:1em;
}
#contact_form dl div dt {
	display:flex;

	align-items:center;
}
#contact_form dl div dd {
	text-align:left;
}

#contact_form dl div dd input {
	width:100%;
	padding-left:0.5em;
	border:2px solid #0071b6;
	font-size:1.2em;
}
#contact_form dl div dd textarea {
	width:100%;
	height:12em;
	border:2px solid #0071b6;
}

.contact_submit {
	width:10em;
	height:3em;
	border-radius:20px;
	background:var(--color7);
	color:#fff;
	border:0;
	margin:2em auto 4em;
}

/* 内容確認のときは見出しを太字に */
#contact_form dl.conf div dt {
	font-weight:bold;
}

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

　　　　　　　　　　CSS振り分け

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

	section#about {
		position:relative;
		text-align:left;
		padding-top:6em;
	}
	#about_bg {
		position:absolute;
		bottom:0;
		left: 50%;
		transform: translate(-50%, -0%);
		-webkit-transform: translate(-50%, -0%);
		-ms-transform: translate(-50%, -0%);
		text-align:right;
	}
	#about_bg p {
		width:40%;
		text-align:left;
		margin-left:auto;
	}
	.more {
		margin-right:2em;
	}

	/* パソコンで見ると小さく感じたので大きめに */
	#main_text2 h1 img {
		height:28%;
	}

	/* PC用に見出しバーのデザイン調整 */
	:root {
		--h2long:0px;
	}

	h2.leftbar_contact {
		font-size:1.4em;
		padding-left:calc((100vw - var(--base-width))/2  + var(--h2long) + 1em);
	}
	h2.leftbar_contact::before {
		border-left:calc((100vw - var(--base-width))/2  + var(--h2long)) solid var(--color7);
	}

	#contact_form {
		display:flex;
	}
	#contact_form dl div {
		display:flex;
	}
	#contact_form dl div dt {
		flex-basis:30%;
		width:18em;
		display:flex;
		justify-content:flex-start;
		align-items:center;
	}
	#contact_form dl div dd {
		flex-basis:70%;
		text-align:left;
	}

}