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


/* =====================
  sub-mv
===================== */

#sub-mv .main-area {
	background-image: url(../images/aboutwork/bg_mv.jpg);
}


/* =====================
  contents
===================== */

main .fade-contents {
	animation-delay: 0.4s;
}

.contents {
	overflow: hidden;
	position: relative;
}

.contents .container {
	animation-delay: 0.4s;
}

.contents .bg {
	display: block;
	width: 59.0625vw;
	height: 43.1875vw;
	max-height: 690px;
	position: absolute;
	z-index: -1;
	background: #efefef;
	bottom: 0;
}

.contents .container {
	position: relative;
	width: 1660px;
	overflow: hidden;
}

.contents .text-area {
	background: rgba(255, 255, 255, 0.9);
	width: 500px;
	padding: 42px 38px;
	position: absolute;
	box-sizing: border-box;
	z-index: 1;
}

.contents .text-area .title01 {
	margin-bottom: 22px;
}

.contents .text-area p {
	line-height: 2;
}

.contents figure {
	width: 75%;
	max-width: 1200px;
}

.contents > figure img {
	width: 100%;
}



/* =====================
  sales
===================== */

#sales {
	margin: 100px 0 0;
}

#sales .container {
	padding-bottom: 160px;
}

#sales .bg {
	left: 0;

}

#sales .text-area {
	left: 15%;
	top: 30.869%;
}

#sales figure {
	float: right;
}


/* =====================
  headquarters
===================== */

#headquarters {
	margin: 117px 0 120px;
}

#headquarters .container {
	padding-bottom: 100px;
}

#headquarters .bg {
	right: 0;
}

#headquarters .text-area {
	top: 32.4637%;
	right: 15%;
}

#headquarters figure {
	float: left;
}



/* ====================================================================================
		tablet
==================================================================================== */
@media screen and (max-width: 991px) {


}




/* ====================================================================================
		SP
==================================================================================== */
@media screen and (max-width: 767px) {


	/* =====================
	contents
	===================== */


	.contents .bg {
		top: 35vw;
		bottom: auto;
	}

	.contents .container {
		position: relative;
		width: 1660px;
		overflow: hidden;
	}

	.contents .text-area {
		width: 100%;
		max-width: 100%;
		padding: 25px 15px;
		position: relative;
	    margin-top: 26px;
	}

	.contents .text-area .title01 {
		margin-bottom: 10px;
	}

	.contents .text-area p {
		line-height: 1.6;
	}

	.contents figure {
		width: 100%;
		max-width: 1200px;
	}

	.contents > figure img {
		width: 100%;
	}



	/* =====================
	sales
	===================== */

	#sales {
		margin: 40px 0 0;
	}

	#sales .container {
		padding-bottom: 0;
	}


	#sales .text-area {
		left: 0;
		top: 0;
	}

	#sales figure {
		float: none;
	}


	/* =====================
	headquarters
	===================== */

	#headquarters {
		margin: 40px 0 80px;
	}

	#headquarters .container {
		padding-bottom: 0;
	}

	#headquarters .bg {
		right: 0;
	}

	#headquarters .text-area {
		top: 0;
		right: 0;
	}

	#headquarters figure {
		float: none;
	}


}