@charset "utf-8";

h3 { margin-top: 5rem; }
h4.line {
	display: inline-block;
	position: relative;
	background: rgba(255, 255, 255, 1);
	padding-right: 2rem;
	z-index: 2;
}
	h4.line::after {
		position: absolute;
		bottom: -1em;
		left: 0;
		z-index: 1;
		width: 100%;
		border-bottom: 1px solid rgba(100, 100, 100, 0.5);
	}

/* [layout] ============================================ */
.cautionUl li {
	text-indent: -1em;
	margin-left: 1em;
}
#pageTitleBox {
	height: 180px;
	background: url(../img/common/header211222.jpg) no-repeat 50% 0%;
	background-size: cover;
	border-bottom: 5px solid rgba(102, 196, 213, 1);
	margin-bottom: 3rem;
}
	#pageTitleBox h2 {
		text-indent: -2000em;
		height: 180px;
		background-position: 0 90%;
		background-repeat: no-repeat;
	}

.toggleChk {
	margin-bottom: 2rem;
	flex-wrap: nowrap;
}
.toggleChk li { width: 50%; }
/*
.toggleChk li:first-child { width: 50%; }
.toggleChk li:last-child { flex-grow: 1; }
*/
	.toggleChk li a {
		display: block;
		text-align: center;
		text-decoration: none;
		padding: 2rem 0.4rem;
		color: rgba(102, 196, 213, 1);
		border: 1px solid rgba(102, 196, 213, 1);
		height: 100%;
	}
	.toggleChk li:first-chlid a { border-right: none; }
		.toggleChk li a:hover, 
		.toggleChk li a.setting {
			background: rgba(102, 196, 213, 1);
			color: rgba(255, 255, 255, 1);
		}

.youtubeBox {
	position: relative;
	width: 100%;
	padding-top: 28.25%;
    margin: 0 10px 0;
}
	.youtubeBox iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}

/* [page] ============================================ */
/* home */
/*
#homeImgBox {
	height: calc( 900vw / 16 ) !important;
	transition: 0.3s;
}
*/
#homeSliderBox {}
	#homeSliderBox div { position: relative; }
		#homeSliderBox div.slick-slide img { width: 100%; }
	#homeSliderBox div.slick-slide::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.25);
		background-image: 
			linear-gradient(
				45deg, 
				rgba(0, 0, 0, 0.5) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.5)
			), 
			linear-gradient(
				45deg, 
				rgba(0, 0, 0, 0.5) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.5)
			);
		background-position: 0 0, 2px 2px;
		background-size: 4px 4px;
		z-index: 300;
	}
	#homeSliderBox div.slick-current::before, 
	#homeSliderBox div.draggable::before { content: none; }

#homeBannerBox, 
#homeNewsBox, 
#homeCopyBox { margin: 5rem auto; }
	#homeCopyBox dl {}
		#homeCopyBox dt {
			width: 40%;
			border-right: 1px solid rgba(100, 100, 100, 0.5);
			text-align: center;
			font-size: 2rem;
			padding-top: 6.5rem;
		}
		#homeCopyBox dd {
			width: 53%;
			/*width: 50%;*/
			padding: 3rem 0;
		}

.homeBtnBox {}
	.homeBtnBox dt {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
		width: 60%;
		text-indent: -2000em;
		height: 30vw;
	}
	.homeBtnBox dd {
		width: 38%;
		text-align: center;
	}
		.homeBtnBox dd h3 {
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 0;
			height: 9vw;
			max-height: 106px;
			margin: 4vw 0 2vw 0;
			text-indent: -2000em;
		}
		.myBtn, 
		#homeNewsBox .alllistBtnLi a, 
		.homeBtnBox dd a {
			padding: 0.5rem 3rem;
			font-size: 1.2rem;
			border-radius: 3px;
			display: inline-block;
			text-decoration: none;
			font-weight: bold;
		}
#homeOurbusinessBox dl { background: rgba(102, 196, 213, 1); color: rgba(255, 255, 255, 1); }
	#homeOurbusinessBox dl dt { background-image: url(../img/home/image_ourbusiness.jpg); order: 2; }
	#homeOurbusinessBox dl dd { order: 1; }
		#homeOurbusinessBox dl dd h3 { background-image: url(../img/home/title_ourbusiness.png); }
		#homeOurbusinessBox dl dd a { background: rgba(255, 255, 255, 1); color: rgba(102, 196, 213, 1); }
		#homeOurbusinessBox dl dd a:hover { background: rgba(255, 255, 0, 1); color: rgba(51, 51, 51, 1); }
#homeRecruitBox {}
	#homeRecruitBox dl dt { background-image: url(../img/home/image_recruit.jpg); }
		#homeRecruitBox dl dd h3 { background-image: url(../img/home/title_recruit.png); }
		.myBtn, 
		#homeNewsBox .alllistBtnLi a, 
		#homeRecruitBox dl dd a { background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); }
		#homeNewsBox .alllistBtnLi a:hover, 
		#homeRecruitBox dl dd a:hover { background: rgba(100, 100, 100, 0.5); color: rgba(51, 51, 51, 1); }

	#homeNewsBox dt {
		width: 30%;
		background: url(../img/home/title_news.png) no-repeat 50% 50%;
		text-indent: -2000em;
	}
	#homeNewsBox dd {
		width: 67%;
		border-radius: 5px;
		padding: 3rem;
		border: 1px solid rgba(100, 100, 100, 0.1);
		box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
	}
		#homeNewsBox dd ul li:not(:last-child) {
			border-bottom: 1px dotted rgba(100, 100, 100, 0.5);
		}
			#homeNewsBox dd ul li .newsdate {
				width: 10rem;
				color: rgba(102, 196, 213, 1);
				padding: 1rem 0;
			}
			#homeNewsBox dd ul li .newstitle { flex-grow: 1 }
				#homeNewsBox dd ul li .newstitle a {
					text-decoration: none;
					padding: 1rem;
					display: block;
				}
				#homeNewsBox dd ul li .newstitle a:hover { color: rgba(102, 196, 213, 1); }
				#homeNewsBox .alllistBtnLi { padding-top: 1rem; text-align: right; }

#homeBannerBox .flexBox {
	justify-content: center;
}
	#homeBannerBox .flexBox li {
		width: 20vw;
		margin: 0 1rem;
	}
		#homeBannerBox .flexBox li a {
			text-align: center;
			display: block;
			text-decoration: none;
			padding: 2rem 0;
			border: 1px solid rgba(51, 51, 51, 0.5);
			color:rgba(51, 51, 51, 1);
			box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
			border-radius: 5px;
		}
			#homeBannerBox .flexBox li a:hover {
				background: rgba(102, 196, 213, 1);
				color: rgba(255, 255, 255, 1);
			}
	
	#homeBody h3, 
	#homeBody h3::before { border: none; }

/* company */
#companyBody {}

	.officeintroductionUl > li {
		margin-bottom: 2rem;
		width: 48%;
	}
		.officeintroductionUl li dt {
		}
		.officeintroductionUl li dd {
			border: 1px solid rgba(100, 100, 100, 0.5);
			box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.1);
			border-radius: 5px;
		}
			.officeintroductionUl li dd .mapBox {
				width: 100%;
				position: relative;
				padding-bottom: 25%;
				padding-top: 30px;
				height: 0;
				overflow: hidden;
			}				 
				.officeintroductionUl li dd .mapBox iframe,
				.officeintroductionUl li dd .mapBox object,
				.officeintroductionUl li dd .mapBox embed {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			.officeintroductionUl li dd .textBox {
				padding: 2rem;
				padding-bottom: 1rem;
			}
				.officeintroductionUl li dd .textBox .photoBox {
					width: 40%;
					float: right;
				}
				.officeintroductionUl li dd .telBox::before, 
				.officeintroductionUl li dd .faxBox::before {
					content: 'Tel';
					width: 6rem;
					background: rgba(102, 196, 213, 1);
					color: rgba(255, 255, 255, 1);
					text-align: center;
					display: inline-block;
					border-radius: 3px;
					margin: 0 1rem 0.5rem 0;
					font-size: 1.2rem;
				}
				.officeintroductionUl li dd .faxBox::before { content: 'Fax'; }
				.officeintroductionUl li dd .certificationBox {
					font-size: 1.2rem;
				}
				.officeintroductionUl li dd .certificationBox li {
					margin-bottom: 0;
					line-height: 130%;
				}
				#companyBody .leftThlineTable { border-top: none; }
					#companyBody .leftThnolineTable th { width: 20%; }
					#companyBody .leftThlineTable th.spHide, 
					#companyBody .leftThlineTable td.spHide { display: table-cell; }

/* business */
.companyBox {
	position: relative;
	margin-top: 5rem;
	padding-top: 3rem;
	color: rgba(255, 255, 255, 1);
}
	.companyBox h3 {
		margin-bottom: 2rem;
/*
		font-size: 2.6rem;
		border-bottom: none;
		margin-top: 0;
*/
	}
	.companyBox::before {
		content: '';
		width: 100%;
		height: 30vh;
		background: rgba(102, 196, 213, 1);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.companyContentBox {
		border-radius: 5px;
		padding: 4rem;
		color: rgba(51, 51, 51, 1);
		background: rgba(243, 250, 249, 1);
	}
	.productUl { margin-bottom: 4rem; }
	#horidenContentBox .productUl { justify-content: flex-start; }
		#horidenContentBox .productUl li.concrete { margin-right: 4rem; }
		.productUl li {
			width: 14vw;
		}
			.productUl2 li h5, 
			.productUl li a {
				display: block;
				text-align: center;
				text-decoration: none;
				width: 14vw;
				height: 14vw;
				line-height: 14vw;
				border-radius: 50%;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: 50% 50%;
				font-size: 1.8vw;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				text-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
				position: relative;
			}
			.productUl li.concrete a { background-image: url(../img/business/btn_concrete.png); }
			.productUl li.cement a { background-image: url(../img/business/btn_cement.png); }
			.productUl li.aggregate a { background-image: url(../img/business/btn_aggregate.png); }
			.productUl li.processedgoods a {
				background-image: url(../img/business/btn_processedgoods.png);
				padding-top: 4vw;
				line-height: 125%;
			}
			#horidenContentBox .productUl li.cement a {
				padding-top: 4vw;
				line-height: 125%;
			}
				.productUl li a::after {
					content: '詳しくは';
					width: 100%;
					text-align: center;
					background: rgba(0, 0, 0, 1);
					color: rgba(255, 255, 255, 1);
					padding: 1rem 0;
					border-radius: 5px;
					position: absolute;
					bottom: 1vw;
					left: 0;
					font-size: 1.4rem;
					line-height: 100%;
				}

	.productUl2 li {
		position: relative;
		margin: 0 0 4rem 16vw;
	}
		.productUl2 li h5 {
			position: absolute;
			top: 0;
			left: -16vw;
			max-width: 200px;
			max-height: 200px;
		}
		.productUl2 li.qualitymanagement h5 { background-image: url(../img/business/qualitymanagement.png); }
		.productUl2 li.highstrength h5 {
			background-image: url(../img/business/highstrength.png);
			padding-top: 4vw;
			line-height: 125%;
		}
		.productUl2 li.safety h5 { background-image: url(../img/business/safety.png); }
		.productUl2 li.environment h5 { background-image: url(../img/business/environment.png); }
		.productUl2 li a {
			background: rgba(0, 0, 0, 1);
			color: rgba(255, 255, 255, 1);
			padding: 1rem 2rem;
			border-radius: 5px;
			font-size: 1.4rem;
			line-height: 100%;
			text-decoration: none;
		}
	#groupInitiativesBox {
		margin-top: 4rem;
		border: 1px solid rgba(100, 100, 100, 0.5);
		padding: 4rem 4rem 3rem 4rem;
		box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
		color: rgba(51, 51, 51, 1);
		border-radius: 5px
	}
		#groupInitiativesBox h4 { margin-bottom: 1rem; }
		#groupInitiativesBox dd .smallText { line-height: 130%; }

/* qualitymanagement */
#qualitymanagementBody {}
.myDl {}
	.myDl dt {
		color: rgba(102, 196, 213, 1);
		font-weight: bold;
	}
	.myDl dd { margin-bottom: 2rem; }

		#businessBody ul.photoUl li, 
		#qualitymanagementBody ul.photoUl li,
		#highstrengthBody ul.photoUl li { width: 48%; margin-bottom: 3.2vw; }


/* recruit */
#recruitBody {}
	#recruitBody .leftThnolineTable th {
		background: rgba(102, 196, 213, 1);
		color: rgba(255, 255, 255, 1);
		border-bottom: 2px solid rgba(255, 255, 255, 1);
		width: 25%;
	}
	#recruitBody .leftThTable thead th { width: 33%; }


/* contact */
#contactBody {}
	#contactBody .leftThTable td { width: 70%; }

	
/* news */
.newslistDl {
	border-radius: 5px;
	padding: 1rem 3rem;
	border: 1px solid rgba(100, 100, 100, 0.1);
	box-shadow: 1px 1px 2px	rgba(100, 100, 100, 0.5);
	margin-bottom: 2rem;
}
	.newslistDl dt {
		font-size: 2.0rem;
		margin-bottom: 1rem;
	}
	.newslistDl dd .newsDateBox { width: 20%; padding: 0.5rem 0; }
	.newslistDl dd .newsCategoryUl {
		flex-grow: 1;
		margin: 0.5rem 0;
		justify-content: flex-start;
	}
		.newslistDl dd .newsCategoryUl li {
			font-size: 1.2rem;
			border: 1px solid rgba(100, 100, 100, 0.5);
			padding: 0 1rem;
			margin-right: 0.5rem;
			border-radius: 5px;
		}
	.newslistDl dd .newsBtnBox { width: 20%; }

.newsContentBox {
	margin: 2rem 0 5rem 0;
}

@media only screen and (min-width: 1600px) {
	#pageTitleBox h2, 
	#pageTitleBox {
		height: 12vw;
	}
}

/* [sp] ============================================ */
@media only screen and (max-width: 780px) {
	#pageTitleBox h2 { background-size: contain; }

	#homeRecruitBox dt,
	#homeRecruitBox dd, 
	#homeNewsBox dt, 
	#homeNewsBox dd, 
	#homeOurbusinessBox dt, 
	#homeOurbusinessBox dd, 
	#homeCopyBox dt, 
	#homeCopyBox dd { width: 100%; }
	#homeCopyBox dt { padding-top: 0; border-right: none; }
	#homeImgBox { height: 30vh !important; }
	.homeBtnBox dd { padding-bottom: 2rem; }
	#homeRecruitBox h3, 
	#homeNewsBox dt, 
	#homeOurbusinessBox dd h3 { height: 70px; background-size: contain; }
	#homeOurbusinessBox dd p { padding-bottom: 0.5rem; }
	#homeBannerBox .flexBox { justify-content: space-between; }
	#homeBannerBox .flexBox li { width: 100%; margin: 0 0 0.5rem 0; }

	.officeintroductionUl > li { width: 100%; }

	#homeOurbusinessBox dl dt { order: 1; }
	#homeOurbusinessBox dl dd { order: 2; }

	.productUl li {
		width: 32vw;
		height: 32vw;
		margin-bottom: 2rem;
	}
		.productUl2 li h5, 
		.productUl li a {
			width: 50vw;
			height: 50vw;
			line-height: 50vw;
			font-size: 8vw;
		}
		.productUl li.processedgoods a {
			line-height: 125%;
		}
		#horidenContentBox .productUl { justify-content: space-between; }
		#horidenContentBox .productUl li.concrete { margin-right: 0; }

	.productUl2 li {
		margin-left: 0;
	}
		.productUl2 li h5 {
			position: relative;
			top: auto;
			left: auto;
			margin: 0 auto;
		}
	
	.officeintroductionUl li dd .textBox .photoBox { width: 100%; }

	#recruitBody .leftThTable th, 
	#recruitBody .leftThTable td {
		font-size: 1.2rem;
		padding: 0.5em;
		line-height: 125%;
	}

	#companyBody .leftThlineTable td::before {
		display: block;
		font-size: 1.4rem;
	}
	#companyBody .leftThlineTable th.spHide, 
	#companyBody .leftThlineTable td.spHide { display: none; }
	.companyBox::before { height: 50vh; }
	#businessBody ul.photoUl li {
		width: 100%;
		margin-bottom: 1rem;
	}
}