@charset "utf-8";

.mainImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height:0;
	padding-top: 24.41%;
	background-image: url("../img/org/main.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}

/* union */
#union{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-image: url("../img/common/bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #ffffff;
}
#union h2{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 10%;
	background-image: url("../img/org/ttl_org.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#union ul{
	position: relative;
	margin: 0 auto;
	width: 96%;
}
#union ul:not(.navigation) li{
	position: relative;
	margin: 0 auto;
	padding: 0 0 22% 0;
}
#union ul:not(.navigation) li h3{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 58.58%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#union ul:not(.navigation) li:nth-child(1) h3{background-image: url("../img/org/org01.png");}
#union ul:not(.navigation) li:nth-child(2) h3{background-image: url("../img/org/org02.jpg");}
#union ul:not(.navigation) li:nth-child(3) h3{background-image: url("../img/org/org03.jpg");}
#union ul:not(.navigation) li:nth-child(4) h3{background-image: url("../img/org/org04.jpg");}
#union ul:not(.navigation) li:nth-child(5) h3{background-image: url("../img/org/org05.jpg");}
#union ul:not(.navigation) li:nth-child(6) h3{background-image: url("../img/org/org06.jpg");}
#union ul:not(.navigation) li:nth-child(7) h3{background-image: url("../img/org/org07.jpg");}
#union ul:not(.navigation) li:nth-child(8) h3{background-image: url("../img/org/org08.jpg");}
#union ul:not(.navigation) li:nth-child(9) h3{background-image: url("../img/org/org09.jpg");}

#union ul:not(.navigation) li p{
	position: relative;
	margin: 0;
	text-align: left;
	line-height: 1.857em;
}
a.btn{
	position: relative;
	margin: 4% auto;
	padding: .2em;
	width: 60%;
	border: solid 3px #4187c7;
	background-color: #ffffff;
	background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(65,135,199,1) 50%) !important;
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.16s ease-out;
	display: block;
	color: #434343;
	font-weight: bold;
	font-size: .18rem;
}
.net a.btn{
	border: solid 3px #e2df41;
	background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(226,223,65,1) 50%) !important;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	a.btn{ width: 200px; }
	li:not(.net) a.btn:hover{ color: #ffffff; }
		
	/* about */
	#union{padding-top: 0;margin: 0 auto 120px auto;background-image: none;}
	#union .contents-inner{
		margin: 0 auto;
		padding-top: 60px;
		background-image: url("../img/common/bg.jpg");
		background-size: 729px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#union h2{
		margin: 0 0 30px 20px;
		width: 198px;
		padding-top: 33px;
		background-size: contain;
	}
	#union ul:not(.navigation){
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-around;
		text-align: center;
		width: 1000px;
		margin:70px auto 0 auto;
	}
	#union ul:not(.navigation) li{width: 475px;padding: 0 0 100px 0;}
	#union ul:not(.navigation) li p{min-height: 7em !important;}
	
}