@charset "utf-8";
/*------------------------------------------

    FIRST VIEW

------------------------------------------*/
#fv .pcvideo {position:relative;width:100%;padding-top:56.25%;}
#video-background,
#video-overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#video-background {z-index: -2;}
#video-overlay {z-index: -1;}
.spvideo {display: none}
@media only screen and ( max-width : 480px ) {
	#fv .pcvideo {display: none;}
	.spvideo {
		display: block;
		position:relative;
		width:100%;
		padding-top:88.25%;
		z-index: 1;
	}
	.spvideo video {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}
/*------------------------------------------

    SERVICE

------------------------------------------*/
#service {padding-bottom: 0;background: #FBFBFB;}
#service p.txt {margin-bottom: 7rem;text-align: center;line-height: 2.2;}
#service .flexbox {position: relative;}
#service .flexbox figure {
	position: absolute;
	left: 50%;
	bottom: 50%;
	z-index: 3;
	transform: translate(-50%,50%);
	width: 20rem;
}
#service .flexbox a {
	position: relative;
	z-index: 2;
	width: 50%;
	padding: 6rem 1rem 10rem;
	background: #fff center / cover;
	color: #fff;
	text-align: center;
}
#service .flexbox a:before {top: 0;left: 0;}
#service .flexbox a:after {bottom: 0;right: 0;}
#service .flexbox a:nth-of-type(1) {background-image: url("../img/front/service/photo01.jpg");}
#service .flexbox a:nth-of-type(2) {background-image: url("../img/front/service/photo02.jpg");}
#service .flexbox a:nth-of-type(3) {background-image: url("../img/front/service/photo03.jpg");}
#service .flexbox a:nth-of-type(4) {background-image: url("../img/front/service/photo04.jpg");}
#service .flexbox a:before,
#service .flexbox a:after {
	content: '';
	position: absolute;
	width: 3px;
	height: 0;
	z-index: -1;
	background-color: #000;
	transition: all 300ms linear;
}
#service .flexbox span.line01,
#service .flexbox span.line02 {
	display: inline-block;
	position: absolute;
	transition: all 300ms linear;
	transition-delay: 250ms;
	height: 3px;
	width: 0;
	background-color: #000;
}
#service .flexbox a span.line01 {top: 0;right: 0;}
#service .flexbox a span.line02 {bottom: 0;left: 0;}
#service .flexbox a:hover:before,
#service .flexbox a:hover:after {height: 100%;}
#service .flexbox a:hover span.line01,
#service .flexbox a:hover span.line02 {width: 100%;}
#service .flexbox h3 {
	display: inline-block;
	margin-bottom: 3rem;
	padding: 2rem 8%;
	border: 2px solid #fff;
	font-weight: 700;
	font-size: 3.6rem;
}
#service .flexbox p {max-width: 59rem;margin: 0 auto;}
#service .flexbox .arrow {
	position: absolute;
	left: 50%;
	bottom: 3rem;
	transform: translate(-50%,0);
	width: 5rem;
}
@media only screen and ( max-width : 1235px ) {
	#service .flexbox figure {width: 10rem;}
	#service .flexbox a {padding: 3rem 1rem 10rem;}
	#service .flexbox h3 {font-size: 2.6rem;}
}
@media only screen and ( max-width : 1024px ) {
	#service .flexbox figure {display: none;}
	#service .flexbox a {width: 100%;}
}
@media only screen and ( max-width : 767px ) {
	#service .flexbox h3 {padding: 1rem 2rem;font-size: 2rem;}
	#service .flexbox .arrow {width: 3rem;}
	#service p.txt {text-align: left; line-height: 1.8;}
}
/*------------------------------------------

    ABOUT US

------------------------------------------*/
#about {background: url("../img/front/about/bg.jpg") no-repeat center / cover;}
#about table {
	max-width: 70rem;
	margin: 0 auto;
	padding: 5% 4%;
	border: 1px solid #707070;
	border-collapse: inherit;
	border-spacing: 0 1rem;
	background: rgba(255,255,255,.6);
}
#about th {
	width: 11rem;
	font-weight: bold;
}
@media only screen and ( max-width : 480px ) {
	#about th {width: 8rem;}
}