/** |READ ME| *************************************************************************************
"ユニオン住宅機器 business.css"
Cascading Style Sheet Setting File
Ver.20171116
************************************************************************************** |READ ME| **/
/* ---------------------------------------------- /*
 * 事業内容
/* ---------------------------------------------- */

/*gallery*/

#gallery {
	margin-top: -91px;
	padding-top: 92px;
}

@media only screen and (max-width: 767px){
		#gallery {
		margin-top: -66px;
		padding-top: 67px;
	}
}
/*.h-txt*/
@media only screen and (max-width: 768px) {
	.h-txt {
		width: 200px!important;
	}

}

@media only screen and (max-width: 500px) {
	.h-txt {
		width: 120px!important;
	}
}
/*.grn-bdr*/

.grn-bdr h2{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.grn-bdr h2 img {
	margin: 0 0.3em;
}

.four {
	max-height: 70px;
}
@media only screen and (max-width: 767px) {
	.four {
		max-height: 35px;
	}
}

.wh-box {
	background:#fff;
	border: 2px solid #18A558;
	position: relative;
	min-height: 190px;
	margin: 45px auto 15px auto;
	padding: 50px 30px 15px 30px;
}

@media only screen and (max-width: 1199px) {
	.wh-box {
		min-height: 215px;
	}
}

@media only screen and (max-width: 767px) {
	.wh-box {
		min-height: 140px;
	}
}

@media only screen and (max-width: 500px) {
		.wh-box {
		padding: 50px 15px 15px 15px;
	}
}

.wh-box .bg-grn {
	color: #fff;
	width: 80%;
	padding: 13px 0;
	text-align: center;
	background: #18A558 url('../img/business/grn-bg.png') top left repeat;
	position: absolute;
	top: -25px;
	left: 10%;
}

.wh-box.item01 {
	background: #fff url("../img/business/icon-01.png") bottom right no-repeat;
}
.wh-box.item02 {
	background: #fff url("../img/business/icon-02.png") bottom right no-repeat;
}
.wh-box.item03 {
	background: #fff url("../img/business/icon-03.png") bottom right no-repeat;
}
.wh-box.item04 {
	background: #fff url("../img/business/icon-04.png") bottom right no-repeat;
}

.grn-focus {
	position: relative;
	margin-bottom: 250px;
}

.grn-focus img{
	width: 90%;
	margin: 0 5%;
}
.grn-focus > div:before {
	padding-top: 100%;
}

.grn-focus > div{
	margin: 0 auto;
	width: 66%;
	height: 100%;
	background: url("../img/business/focus-bg.png") top center no-repeat;
	background-size: contain;
	position: absolute;
/*	bottom: -312px;*/
	bottom: -290px;
	left: 17%;
	padding: 20px;
}

.grn-focus h3 {
	background: #18A558;
	color: #fff;
	padding: 10px;
	text-align: center;
}

.grn-focus p {
	font-size: 14px;
}

@media only screen and (max-width: 1199px) {
	.grn-focus > div{
		width: 84%;
		left: 8%;
		bottom: -230px;
	}
}


@media only screen and (max-width: 991px) {
	.grn-focus > div{
		bottom: -215px;
		padding: 15px;
	}
}
@media only screen and (max-width: 767px) {

	.grn-focus {
		margin-bottom: 15px;
	}

	.grn-focus img {
		width: 100%;
		margin: 0;
	}

	.grn-focus > div{
	position:static;
	margin: 5px auto;
	background: #fff;
	border:1px solid #18A558;
	width: 100%;
	height: auto;
	}

	.grn-focus > div p {
	padding: 0;
	margin: 15px auto 0 auto;
	}
}

@media only screen and (max-width: 500px) {
	.grn-focus {
		margin-bottom: 5px;
	}
	.grn-focus > div p {
	padding: 0 15px 15px 15px;
	}
}


.hover-txt {
	background: #3e3a39;
	position: relative;
}

.hover-txt img{
	opacity: 1.0;
	transition: 0.5s;
}

.hover-txt:hover{
	cursor: pointer;
}

.hover-txt img:hover{
	opacity: 0.1;
}

.hover-txt:hover::after {
	content:'';
	color: #fff;
	width: 100%;
	display: inline-block;
	text-align: center;
	font-size: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
}
	.txt_05:hover::after,
	.txt_06:hover::after,
	.txt_07:hover::after,
	.txt_08:hover::after,
	.txt_09:hover::after,
	.txt_10:hover::after {
		font-size: 14px;
	}

@media only screen and (max-width: 1199px){
	.hover-txt:hover::after {
		font-size: 13px;
	}
	.txt_05:hover::after,
	.txt_06:hover::after,
	.txt_07:hover::after,
	.txt_08:hover::after,
	.txt_09:hover::after,
	.txt_10:hover::after {
		font-size: 11px;
	}
}
@media only screen and (max-width: 991px){
	.hover-txt:hover::after {
		font-size: 16px;
	}
}

/*テキスト*/
.hover-txt.txt_01:hover::after {
	content:'A学園／洗面';
}
.hover-txt.txt_02:hover::after {
	content:'Yタワーマンション／特注ユニットバス';
}
.hover-txt.txt_03:hover::after {
	content:'S庁舎保健センター／厨房機器';
}
.hover-txt.txt_04:hover::after {
	content:'Sスタ／洗面カウンター';
}
.hover-txt.txt_05:hover::after {
	content:'Yタワーマンション／キッチン';
}
.hover-txt.txt_06:hover::after {
	content:'Sマンション／キッチン';
}
.hover-txt.txt_07:hover::after {
	content:'S病院／キッチン';
}
.hover-txt.txt_08:hover::after {
	content:'N高校／手洗い';
}
.hover-txt.txt_09:hover::after {
	content:'Yタワーマンション／手洗い';
}
.hover-txt.txt_10:hover::after {
	content:'H幼稚園／手洗い';
}
.ac-head {
	background: #18A558;
	color: #fff;
	text-align: center;
	padding: 0.6em 0;
	font-size: 21px;
	position: relative;
	cursor: pointer;
}

@media only screen and (max-width: 767px) {
		.ac-head {
		font-size: 18px;
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 500px) {
		.ac-head {
		font-size: 14px;
	}
}
.ac-head::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 100%;
	background: #3E3A39;
}

.ac-head::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 20%;
	right: 19px;
	width: 22px;
	height: 22px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	transform: scaleX(0.8) rotate(135deg);
}

.ac-head.active::after {
	transform: scaleX(0.8) rotate(-45deg);
	top: 40%;
	right: 19px;
}
@media only screen and (max-width: 767px) {
	.ac-head::before {
		width: 45px;
	}
	.ac-head::after {
		top: 20%;
		right: 12px;
		width: 20px;
		height: 20px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
	}
	.ac-head.active::after {
		top: 40%;
		right: 12px;
	}
}

@media only screen and (max-width: 500px) {
	.ac-head::before {
		width: 30px;
	}
	.ac-head::after {
		top: 20%;
		right: 8px;
		width: 15px;
		height: 15px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
	}
	.ac-head.active::after {
		top: 40%;
		right: 8px;
	}
}


.ac-content {
	padding: 15px 30px 40px 30px;
}

.ac-content table {
	width: 100%;
}

.ac-content th,
.ac-content td {
	line-height: 1.8;
	font-size: 15px;
}

.ac-content th {
	border-bottom: 2px solid #000;
}

.ac-content td {
	border-bottom: 1px solid #898989;
	padding: 0.5em;
}
.ac-content th:first-of-type,
.ac-content td:first-of-type {
	width:25%;
}
.ac-content th:nth-of-type(2),
.ac-content td:nth-of-type(2) {
	width:60%;
}
.ac-content th:nth-of-type(3),
.ac-content td:nth-of-type(3) {
	width:15%;
}

@media only screen and (max-width: 1199px) {
	.ac-content tr {
		margin: 0.5em 0;
	}
	.ac-content tr th,
	.ac-content tr td {
		width: 100%!important;
		display:block;
		border: none;
		padding: 0 0 0 15px;
		line-height: 1.5;
	}
	.ac-content tr th:last-child {
		border-bottom: 2px solid #000;
		padding-bottom: 0.5em;
	}
	.ac-content tr td:first-child {
		padding-top: 0.5em;
	}
	.ac-content tr td:last-child {
		padding-bottom: 0.5em;
		border-bottom: 1px solid #898989;
	}
}

@media only screen and (max-width: 767px) {
	.ac-content {
		font-size: 14px;
		padding: 10px 15px 20px 15px;
	}
	.ac-content tr th,
	.ac-content tr td {
		padding: 0;
	}
}

@media only screen and (max-width: 500px) {
		.ac-content {
		font-size: 14px;
		padding: 10px 0 20px 0;
	}
}