﻿
section#intro {
	padding-top:3em;
}
section#what ,
section#eff ,
section#pub {
	padding-top:1.5em;
}
section#end {
	padding-top:1.5em;
	padding-bottom:4em;
}

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

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

  		　　メインTOP

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

#about_img {
	position:relative;
	height:calc(50vw + 3em);

}
/* ********* VOICE ******** */
#about_text2 {
	position:absolute;
	bottom:5%;
	right: 3%;
	z-index:10;
	width:50.7vw;
	height:auto;
}

/* ********* 見出し ******** */
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;
}

/* ********* 内容 ******** */

section#intro .cont_inner img ,
section#what .cont_inner img {
	margin-bottom:2em;
}

}
section#end .cont_inner img {

}
section#intro .cont_inner p ,
section#what .cont_inner p ,
section#eff .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;
}

/* 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:51.7%;
	height:auto;
	margin:0 auto 3em;
}


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

　　　　　　　　　　CSS振り分け

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

	#about_img {
		position:relative;
		height:100vh;

	}

	section#intro ,
	section#what ,
	section#eff ,
	section#pub ,
	section#end {
		padding-top:4em;
		padding-bottom:0;
	}
	
	/* 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;
	}


	/* PC用に背景画像の固定 */
	.what_bg {
		background:url('img/what_img1L.jpg') no-repeat center top;
		background-size:cover;
		background-attachment: fixed;
		padding-bottom:47.72vh;
		margin-top:6em;
		margin-bottom:6em;
	}
	section#what img {
		display:none;
	}

	/* PDF一覧のレイアウト変更 */
	.about_flex {
		display:flex;
	}
	ul.about_left {
		width:55%;
	}
	ul.about_left li img {
		height:28vh;
	}
	ul.about_right {
		width:45%;
		padding-left:3%;
	}
	ul.about_right li img {
		height:43.0vh;
	}
	ul.about_list li {
		margin-bottom:2vh;
	}
	ul.about_list li a {
		font-size:1.4em;
	}

	/* さんぱいくん：産廃情報ネット */
	div.sanpaikun {
		margin-top:6em;
	}

	/* おわりに */
	.end_bg {
		background:url('img/end_img1L.jpg') no-repeat center top;
		background-size:cover;
		background-attachment: fixed;
		padding-bottom:47.72vh;
		margin-top:6em;
	}
	section#end img {
		display:none;
	}

	/* PC用レイアウト */
	.cont_flex {
		display:flex;
	}
	.cont_flex .flex_img {
		flex-basis:45%;
		padding-top:0.5em;
	}
	.cont_flex .flex_text {
		flex-basis:55%;
		padding-left:2em;
	}

	.what_bg ,
	.end_bg {
			width:100%;
			max-width:100%;
	}
