@charset "utf-8";

/* --------------------------------------------

私たちについて

---------------------------------------------- */
.aboutPageTitle {
	position: relative;
	width: 92%;
	margin: 7.5rem auto;
}

.aboutPageTitle__img {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.aboutPageTitle__photo-pc {
	display: block;
}
.aboutPageTitle__photo-sp {
	display: none;
}


.aboutPageTitle h1 {
	position: absolute;
	top: -8rem;
	left: 50%;
	width: 660px;
	margin: 0 auto 0 -330px;
	text-align: center;
	font-size: 10px;
	font-size: 1rem;
}

.aboutPageTitle h1 p {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	color: #F4F3F1;
	color: rgba(0,0,0,0.01);
}

.aboutPageTitle h1 img {
	position: relative;
	max-width: 100%;
}



/*--- Responsive ---*/
@media screen and (max-width:1024px) {
.aboutPageTitle {
	margin:5.5rem auto 0rem;
}
.aboutPageTitle h1 {
	top: 10rem;
	left: 50%;
	width: 90%;
	margin: 0 auto 0 -45%;
	text-align: center;
}
.aboutPageTitle h1 img {
	max-width: 100%;
}

.aboutPageTitle__photo-pc {
	display: none;
}
.aboutPageTitle__photo-sp {
	display: block;
}


}
@media screen and (max-width:640px) {
.aboutPageTitle {
	margin:2.5rem auto 0rem;
}
}



/*--- Animation ---*/
.aboutPageTitle__img img {
	width: 100%;
	/*animation: aboutPageTitle__img 20s linear 0s 1 normal both;*/
}
/*

@keyframes aboutPageTitle__img {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
*/





/* --------------------------------------------

仕事は堅く　＋　発想は柔らかく

---------------------------------------------- */
.motto {
	position: relative;
	padding: 11.5em 0 5rem;
	color: #EBE9E6;
}

.motto div.mottoInner::after {
	content: "";
	display: block;
	position: relative;
	width: 880px;
	max-width: 100%;
	height: 230px;
	margin-top: -150px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
    z-index: 3;
}



.motto div.mottoInner>img {
	position: absolute;
	top: 2.8em;
	width: 20%;
	max-width: 200px;
	z-index: 4;
}

.motto div.animeOverlay img {
	width: 100%;
}

.motto h2 {
	width: 80%;
	max-width: 39em;
	padding: 5em 0% 1.5em;
	margin: auto;
	font-size: 22px; font-size: 2.2rem;
	text-align: justify;
}


.motto-1 {
	background: url(../img/motto-1Bg.png);
}
.motto-2 {
	background: url(../img/motto-2Bg.png);
}

.motto-1 div.mottoInner > img {
	right: 6%;
}
.motto-2 div.mottoInner > img {
	left: 6%;
}

.motto__photo-pc {
	display: block;
}
.motto__photo-sp {
	display: none;
}

.motto-1 div.mottoInner::after {
	float: left;
	background-image: url(../img/section1titleEn.png);
}

.motto-2 div.mottoInner::after {
	float: right;
	background-image: url(../img/section2titleEn.png);
}



/*--- Responsive ---*/
@media screen and (max-width:1024px) {
	.motto__photo-pc {
		display: none;
	}
	.motto__photo-sp {
		display: block;
	}
}


@media screen and (max-width:768px) {
.motto {
	padding: 9.5em 0 5rem;
}
.motto div.mottoInner::after {
	height: 26vw;
	margin-top: -12vw;
}

.motto div..mottoInner img {
	width: 22%;
}
.motto h2 {
	font-size: 20px; font-size: 2rem;
}

.motto-1 div.mottoInner img {
	right: 10%;
}
.motto-2 div.mottoInner img {
	left: 10%;
}


}





/* --------------------------------------------

事業紹介部分

---------------------------------------------- */
.serviceWrap {
	background: #000;
	display: flex;
	flex-wrap: wrap;
	padding: 0 0.1em;
}

.serviceItem {
	width: 50%;
	padding:

		0.2em 0.1em 3.5em;
}



.serviceItem a {
	color: #fff;
	transition: 0.5s;
}

.serviceItem h3 {
	padding: 1.5em 0 1.5em;
	text-align: center;
	font-size: 24px;
	font-size: 2.4rem;
	white-space: nowrap;
}

.serviceItem p {
	width: 70%;
	max-width: 18.6em;
	padding: 0 0 1.5em;
	margin: auto;
}

.serviceItem span {
	display: block;
	width: 9em;
	min-width: 40%;
	padding: 0.6em 0 0.4em;
	margin: 0 auto 0.5em;
	text-align: center;
	color: #B29A76;
	font-size: 18px;
	font-size: 1.8rem;
	font-family: 'Bebas Neue', cursive, sans-serif;
	line-height: 1;
	border: 1px solid #B29A76;
	transition: 0.5s;
}
.serviceItem span.newtab::after {
	content: "";
	display: inline-block;
	margin: 0em 0 0 0.4em;
	vertical-align: middle;
	width: 0.7em;
	height: 0.7em;
	background-image: url(../../_common/img/share/newtab-b.png);
	background-size: cover;
}

.serviceItem .serviceImg {
	position: relative;
	display: block;
	overflow: hidden;
}

.serviceItem .serviceImg::before {
	content: "";
	display: block;
	z-index: 1;
	position: absolute;
	top: calc(50% - 0.8em);
	width: 100%;
	height: 2em;
	background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
	/* IE6-9 */
}

.serviceItem .serviceImg::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	top: calc(50% - 0.2em);
	left: 5%;
	width: 1.5em;
	height: 1px;
	border-bottom: 1px solid #B29A76;
	opacity: 1;
	transition: 0.5s;
	transition-timing-function: linear;
}

.serviceItem:hover .serviceImg::after {
	left: 40%;
	opacity: 0.0;
}

.serviceItem .serviceImg img {
	width: 100%;
	transition: 0.5s;
}

.serviceItem .serviceImg p {
	position: absolute;
	z-index: 2;
	top: calc(50% - 0.8em);
	width: 100%;
	text-align: center;
	color: #B29A76;
	font-size: 40px;
	font-size: 4rem;
	font-family: 'Bebas Neue', cursive, sans-serif;
}

.serviceItem .serviceImg p::before,
.serviceItem .serviceImg p::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.8em);
	left: 80%;
	display: block;
	width: 0.7em;
	height: 1px;
	border-bottom: 1px solid #B29A76;
	opacity: 0;
	transition: 0.2s;
	transition-duration: 0.3s;
	transition-timing-function: linear;
}

.serviceItem .serviceImg p::before {
	transform: rotate(0deg) translateY(0em);

	-webkit-transform-origin:right center 0;
	-moz-transform-origin:right center 0;
	-ms-transform-origin:right center 0;
	-o-transform-origin:right center 0;
	transform-origin:right center 0;
}

.serviceItem .serviceImg p::after {
	transform: rotate(0deg) translateY(-0em);

	-webkit-transform-origin:right center 0;
	-moz-transform-origin:right center 0;
	-ms-transform-origin:right center 0;
	-o-transform-origin:right center 0;
	transform-origin:right center 0;
}

/*.serviceItem:hover .serviceImg p::before,
.serviceItem:hover .serviceImg p::after {
	left: 90%;
	opacity: 1;
}*/
.serviceItem:hover .serviceImg p::before {
	animation: serviceImg-1 0.2s linear 0.2s 1 normal both;
}
.serviceItem:hover .serviceImg p::after {
	animation: serviceImg-2 0.2s linear 0.2s 1 normal both;
}

@keyframes serviceImg-1 {
  0% {
  }
  40% {
    transform: rotate(0deg) translateY(0.15em);
		opacity: 1;
  }
  80% {
  }
  100% {
		left: 90%;
		opacity: 1;
    transform: rotate(-33deg) translateY(-0.08em);
  }
}

@keyframes serviceImg-2 {
  0% {
  }
  40% {
    transform: rotate(0deg) translateY(-0.15em);
		opacity: 1;
  }
  80% {
  }
  100% {
		left: 90%;
		opacity: 1;
    transform: rotate(33deg) translateY(0.08em);
  }
}




.serviceItem:hover {}

.serviceItem:hover a {
	color: #B29A76;
}

.serviceItem a:hover span {
	color: #000;
	background: #B29A76;
}

.serviceItem a:hover span.newtab::after {
	background-image: url(../../_common/img/share/newtab.png);
}

.serviceItem:hover .serviceImg img {
	opacity: 0.4;
	transform: scale(1.05);
	filter: blur(2px);
}



/*--- Responsive ---*/
@media screen and (max-width:640px) {
.serviceItem {
	width: 100%;
	padding: 1.1em 5% 3.5em;
}
.serviceItem p {
	width: 80%;
}

}









/* --------------------------------------------

これからも、地域のために。

---------------------------------------------- */
.motto-3 {
	padding-top: 8rem;
	background: url(../img/motto-3Bg.png);
}

.motto-3 h2 {
	text-align: center;
}

.motto-3 h2 img {
	max-width: 100%;
}

.motto-3 p {
	width: 80%;
	max-width: 39em;
	padding: 2em 0%;
	margin: auto;
}

.serviceWrap-B {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 0.1em 6rem;
}

.serviceItem-B {
	width:35%;
	padding: 0 0.1em 6rem;
}

.serviceItem-B a {
	transition: 0.3s;
}

.serviceItem-B a img {
	width: 100%;
	transition: 0.3s;
}

.serviceItem-B h3 {
	padding: 0.5em 0 0.5em;
	text-align: center;
	font-size: 24px;
	font-size: 2.4rem;
}

.serviceItem-B p {
	width: 70%;
	max-width: 18.6em;
	padding: 0 0 1.5em;
	margin: auto;
}

.serviceItem-B span {
	display: block;
	width: 8em;
	padding: 0.6em 0 0.4em;
	margin: auto;
	text-align: center;
	color: #B29A76;
	font-size: 18px;
	font-size: 1.8rem;
	font-family: 'Bebas Neue', cursive, sans-serif;
	line-height: 1;
	border: 1px solid #B29A76;
	transition: 0.5s;
}

.serviceItem-B span.newtab::after {
	content: "";
	display: inline-block;
	margin: 0em 0 0 0.4em;
	vertical-align: middle;
	width: 0.7em;
	height: 0.7em;
	background-image: url(../../_common/img/share/newtab-b.png);
	background-size: cover;
}


.serviceItem-B:hover a {
	color: #B29A76;
}

.serviceItem-B:hover span {
	color: #fff;
	background: #B29A76;
}

.serviceItem-B:hover span.newtab::after {
	background-image: url(../../_common/img/share/newtab-w.png);
}

.serviceItem-B:hover img {
	opacity: 0.6;
}

.serviceItem-B:hover .serviceImg img {
	opacity: 0.4;
	transform: scale(1.05);
	filter: blur(2px);
}





/*--- Responsive ---*/
@media screen and (max-width:640px) {
	.serviceItem-B {
		width: 100%;
		padding: 0 5% 3rem;
	}
}