@charset "utf-8";

/*
 *
 *	top style
 *
 */

/*======================================
	serviceBox
======================================*/
.serviceBox {
	position: relative;
	background: #f7f7f7;
}


/****** serviceNav ******/
.serviceBox .serviceNav li {
	margin-bottom: 3em;
}
.serviceBox .serviceNav li:nth-child(odd) {
	margin-left: 20px;
}
.serviceBox .serviceNav li:nth-child(even) {
	margin-right: 20px;
}
.serviceBox .serviceNav li a {
	position: relative;
	display: block;
	padding: 30px 20px 20px;
}
.serviceBox .serviceNav li a:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: #fff solid 1px;
}
.serviceBox .serviceNav li .txtBox {
	position: relative;
	z-index: 2;
}
.serviceBox .serviceNav li:nth-child(even) .txtBox {
	margin-right: 10%;
}
.serviceBox .serviceNav li:nth-child(odd) .txtBox {
	margin-left: 10%;
}
.serviceBox .serviceNav li .txtBox h2 {
	line-height: 1.2;
	margin: 0 0 .5em;
	padding-bottom: 0;
	letter-spacing: .02em;
	text-align: left;
	font-size: 1.778em;
	font-family: 'Esteban', "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight: bold;
}
.serviceBox .serviceNav li .txtBox h2:after {
	display: none;
}

.serviceBox .serviceNav li .txtBox .btn1 {
	margin: 1em auto 0;
}
.serviceBox .serviceNav li figure {
	position: relative;
	overflow: hidden;
	margin-top: -5px;
	margin-bottom: -40px;
		background:-webkit-gradient(linear, left top, right bottom, from(#f60d7a), to(#edd400));
		background:-webkit-linear-gradient(left top, #f60d7a, #edd400);
		background:-moz-linear-gradient(left top, #f60d7a, #edd400);
	background:linear-gradient(to right bottom, #f60d7a, #edd400);
	z-index: 0;
}
.serviceBox .serviceNav li figure img {
	width: 100%;
}
.serviceBox .serviceNav li:nth-child(odd) figure {
	margin-left: -40px;
}
.serviceBox .serviceNav li:nth-child(even) figure {
	margin-right: -40px;
}

.serviceBox .serviceNav li a:hover figure img {
	opacity: .85;
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
	transform: scale(1.2);
}


/****** flower ******/
.serviceBox .flower {
	position: absolute;
		-moz-transform: scale(.6) rotate(30deg);
		-webkit-transform: scale(.6) rotate(30deg);
		-ms-transform: scale(.6) rotate(30deg);
	transform: scale(.6) rotate(30deg);
	opacity: .5;
	z-index: 2000;
		-moz-transition: all 2s ease;
		-webkit-transition: all 2s ease;
		-ms-transition: all 2s ease;
    transition: all 2s ease;
}
.serviceBox .flower.show {
		-moz-transform: scale(1) rotate(0);
		-webkit-transform: scale(1) rotate(0);
		-ms-transform: scale(1) rotate(0);
	transform: scale(1) rotate(0);
	opacity: 1;
}
.serviceBox .flower#flower1 {
	top: -2%;
	left: -2em;
	width: 31%;
}
.serviceBox .flower#flower2 {
	top: 2%;
	right: .5em;
	width: 15%;
}
.serviceBox .flower#flower3 {
	top: 48%;
	left: -1em;
	width: 25%;
}
.serviceBox .flower#flower4 {
	bottom: -1%;
	right: 0;
	width: 26%;
}



/*======================================
	galleryBox
======================================*/
/****** galleryBox ******/
/* gallerySlide */
.galleryBox .gallerySlide {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.galleryBox .gallerySlide ul li {float: left;}
.galleryBox .gallerySlide ul li img {width: 100%;}
.galleryBox .gallerySlide ul li a:hover img {opacity: .5;}

.galleryBox p .btn1 {
	margin: 2em auto 0;
}



/*======================================
	mvBox
======================================*/
.mvBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
		background:-webkit-gradient(linear, left top, right bottom, from(#f60d7a), to(#edd400));
		background:-webkit-linear-gradient(left top, #f60d7a, #edd400);
		background:-moz-linear-gradient(left top, #f60d7a, #edd400);
	background:linear-gradient(to right bottom, #f60d7a, #edd400);
	z-index: -1;
}
.mvBox h1 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -0.5em;
	text-align: center;
	font-size: 2em;
	letter-spacing: .25em;
	font-family: 'Jaldi';
	color: #fff;
	z-index: 2;
}
.mvBox h1 span {
	font-size: .390em;
	letter-spacing: .45em;
}


/****** mvBox ******/
.mvBox .mvSlide,
.mvBox .mvSlide li {
	width: 100%;
	height: 50vh;
}
.mvBox .mvSlide .slide1_1 {background-image: url(../images/top/slide1_1.jpg);}
.mvBox .mvSlide .slide1_2 {background-image: url(../images/top/slide1_2.jpg);}
.mvBox .mvSlide .slide1_3 {background-image: url(../images/top/slide1_3.jpg);}
.mvBox .mvSlide .slide1_4 {background-image: url(../images/top/slide1_4.jpg);}
.mvBox .mvSlide .slide2_1 {background-image: url(../images/top/slide2_1.jpg);}
.mvBox .mvSlide .slide2_2 {background-image: url(../images/top/slide2_2.jpg);}
.mvBox .mvSlide .slide2_3 {background-image: url(../images/top/slide2_3.jpg);}
.mvBox .mvSlide .slide2_4 {background-image: url(../images/top/slide2_4.jpg);}
.mvBox .mvSlide li {
	background-size: cover;
}



/*============================================================================

	responsive

============================================================================*/
@media screen and (min-width:640px) {

}



@media screen and (min-width:850px) {
/*======================================
	serviceBox
======================================*/
	.serviceBox h1 {
		margin-bottom: 4em;
	}
	
	
	/****** serviceNav ******/
	.serviceBox .serviceNav li {
		margin-bottom: 7em;
	}
	.serviceBox .serviceNav li a {
		padding-top: 50px;
	}
	.serviceBox .serviceNav li .txtBox {
		position: relative;
		z-index: 1;
	}
	.serviceBox .serviceNav li:nth-child(even) .txtBox {
		margin-right: 63.5%;
	}
	.serviceBox .serviceNav li:nth-child(odd) .txtBox {
		margin-left: 63.5%;
	}
	.serviceBox .serviceNav li .txtBox .btn1 {
		margin-top: 2em;
	}
	.serviceBox .serviceNav li figure {
		position: absolute;
		top: -15px;
		width: 63%;
		margin-bottom: auto;
		z-index: 0;
	}
	.serviceBox .serviceNav li:nth-child(odd) figure {
		left: 20px;
	}
	.serviceBox .serviceNav li:nth-child(even) figure {
		right: 20px;
	}
	
	
	/*======================================
		mvBox
	======================================*/
	/****** mvBox ******/
	.mvBox {
		overflow: hidden;
	}
	.mvBox h1 {
		font-size: 3.2em;
	}
	.mvBox .mvSlide {
		float: left;
		width: 50%;
		height: 100vh;
	}
	.mvBox .mvSlide li{
		height: 100vh;
	}

}