@charset "utf-8";

/*********** KV ***********/

.kv {
	position: relative;
	background: url("../images/top/kv_bg.png") center / cover;
	width: 100vw;
	height: 100vh;
    min-height: 600px;
	margin-bottom: 70px;
	z-index: 1;
}
.kv .bg_wh,.kv .mat {
	position: absolute;
	width: 100%;
	height: 100vh;
	top:0;
	left: 0;
	z-index: 9990;
}
.kv .bg_wh img,.kv .mat img {
	width: 100%;
	height: 100vh;
}
.kv > .box {
	position: relative;
	max-width: 1100px;
	height: 100vh;
	width: 90%;
	margin: auto;
}
.kv .cc {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	color: #fff;
	font-size: 90px;
	line-height: 1.0;
}
.kv h1 small {
	font-size: 0.3em;
	display: block;
	line-height: 2.3;
}
.h-logo.headerLogoScroll.-before {
	display : none;
}
.h-logo.-after {
	display : none;
}
.h-logo.headerLogoScroll.-after {
	display : block;
	
}
.kv > .box .redline {
	position: absolute;
	width: 280px;
	bottom: 0;
	right: 250px;
}
.kv > .box .member {
	position: absolute;
	width: 620px;
	bottom: 0;
	right: 0;
}


/*********** PHILOSOPHY ***********/

.top_philosophy {
	position: relative;
}
.top_philosophy .img_bg {
	position: absolute;
	width: 890px; 
	top: -150px;
	left: -600px;
	right: 0;
	margin: auto;
	z-index: 0;
}
.top_philosophy .img_main {
	position: absolute;
	width: 290px;
	top: 150px;
	left: -400px;
	right: 0;
	margin: auto;
	z-index: 1;
}
.top_philosophy .img_1 {
	position: absolute;
	width: 230px;
	top: 500px;
	left: -950px;
	right: 0;
	margin: auto;
}
.top_philosophy .img_2 {
	position: absolute;
	width: 240px;
	top: 650px;
	left: -120px;
	right: 0;
	margin: auto;
}
.top_philosophy .img_3 {
	position: absolute;
	width: 185px;
	top: 770px;
	left: -450px;
	right: 0;
	margin: auto;
}
.top_philosophy .box {
	position: relative;
	width: 400px;
	margin-left: auto;
	line-height: 2.1;
	z-index: 10;
}
.top_philosophy .box p {
	letter-spacing: 0.05em;
}

/*********** WORKS ***********/

.top_works {
	position: relative;
	padding: 400px 0 30px;
}
.top_works .bg_line {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.top_works article {
	position: relative;
	width: 100%; 
	margin: 0 auto 100px;
}
.top_works article .img_bg {
	position: absolute;
	width: 770px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
}
.top_works article .col2_box {
	position: relative;
	width: 100%;
	align-items: center;
	padding-top: 60px;
	z-index: 1;
}
.top_works article .col2_box > div:last-child {
	width: 300px;
}
.top_works article dl dt {
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 20px;
}


/*********** COLUMN ***********/

.top_column {
	width: 100%;
	background: url("../images/top/top_column_bg.png") center / cover;
}


/*********** INFO ***********/

.top_info {
	background: #727577;
}
.top_info .inner_L {
	display: flex;
}
.top_info .body dl {
	position: relative;
	display: flex;
	margin-left: 80px;
	color: #fff;
	padding: 2.0em 80px 2.0em 0;
	border-bottom: 1px solid #ADADAD;
}
.top_info .body dl:after {
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	border-radius: 10px;
	background: #fff;
}
.top_info .body dl:before {
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	border-radius: 10px;
	background: #fff;
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}
.top_info .body dl:hover:before {
	position: absolute;
	content: "";
	width: 40px;
	height: 40px;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	border-radius: 50px;
	background: rgba(255,255,255,.5);
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}
.top_info .body a {
	opacity: 1.0;
}
.top_info .body dl dt {
	width: 240px;
}
.top_info .body dl dt span {
	background: #9A9B9D;
	width: 100px;
	border-radius: 50px;
	font-size: 0.75em;
	padding: 0.15em 0.5em;
	margin: 0 1.0em;
	text-align: center;
	display: inline-block;
}
.top_info .body dl dd {
	width: calc(100% - 240px);
}




/*********** PICK UP ***********/

.top_pick article {
	position: relative;
	width: calc(50% - 70px);
}
.top_pick article .box {
	padding: 65% 40px 20px;
	box-sizing: border-box;
	color: #fff;
}
.top_pick article:nth-child(2n) {
	margin-top: 100px;
}
.top_pick article:nth-child(2n-1) {
	margin-top: 0;
}
.top_pick article:first-child .box {
	background: url("../images/top/top_pick_search.png") no-repeat center top / cover;
}
.top_pick article:nth-child(2) .box {
	background: url("../images/top/top_pick_recruit.png") no-repeat center top / cover;
}
.top_pick article:nth-child(3) .box {
	background: url("../images/top/top_pick_iryou.png") no-repeat center top / cover;
	padding: 52% 40px 20px;
}
.top_pick article:nth-child(4) .box {
	background: url("../images/top/top_pick_inotakumi.png") no-repeat center top / cover;
	padding: 52% 40px 20px;
}
.top_pick article:nth-child(5) .box {
	background: url("../images/top/top_pick_brucke.png") no-repeat center top / cover;
	padding: 52% 40px 20px;
}
.top_pick article .box dl dt {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 20px;
}
.top_pick article p {
	position: absolute;
	top: 115px;
	right: -140px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(2) p {
	position: absolute;
	top: 130px;
	right: -155px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(3) p {
	position: absolute;
	top: 160px;
	right: -185px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(4) p {
	position: absolute;
	top: 122px;
	right: -148px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(5) p {
	position: absolute;
	top: 110px;
	right: -135px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}



/*********** CLIENT ***********/

.top_client {
}
.top_client .layout_box {
	display: flex;
}
.top_client .layout_box .body {
	margin-left: 120px;
}

 

@media screen and (max-width: 999px) {
	
/*********** KV ***********/

.kv > .box {
	position: relative;
	max-width: 1100px;
	height: 100vh;
	width: 90%;
	margin: auto;
}
.kv .cc {
	position: absolute;
	top: 30%;
	left: 5%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	color: #fff;
	font-size: 90px;
	line-height: 1.4;
}
.kv h1 span {
	font-size: 0.5em;
	display: block;
}
.kv > .box .redline {
	position: absolute;
	width: 280px;
	bottom: 0;
	right: 250px;
}
.kv > .box .member {
	position: absolute;
	width: 650px;
	bottom: 0;
	right: 0;
}


/*********** PHILOSOPHY ***********/

.top_philosophy .img_main {
	position: absolute;
	width: 290px;
	top: 150px;
	left: -400px;
	right: 0;
	margin: auto;
	z-index: 1;
}
.top_philosophy .img_1 {
	position: absolute;
	width: 200px;
	top: 600px;
	left: -700px;
	right: 0;
	margin: auto;
	z-index: 2;
}
.top_philosophy .img_2 {
	position: absolute;
	width: 220px;
	top: 650px;
	left: -120px;
	right: 0;
	margin: auto;
}
.top_philosophy .img_3 {
	position: absolute;
	width: 175px;
	top: 790px;
	left: -450px;
	right: 0;
	margin: auto;
}
.top_philosophy .box {
	position: relative;
	width: 50%;
	margin-left: auto;
	line-height: 2.1;
	z-index: 10;
}
	
/*********** WORKS ***********/

.top_works {
	position: relative;
	padding: 300px 0 30px;
	margin-top: 100px;
}
.top_works article {
	position: relative;
	width: 100%; 
	margin: 0 auto 70px;
}
.top_works article .img_bg {
	position: absolute;
	width: 90%;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
}
.top_works article .col2_box {
	position: relative;
	width: 100%;
	align-items: center;
	padding-top: 20px;
	z-index: 1;
}
.top_works article .col2_box > div:last-child {
	width: 220px;
}
.top_works article dl dt {
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 0px;
	margin-top: 10px;
}
	
/*********** INFO ***********/

.top_info .inner_L {
	display: block;
}
.top_info .body dl {
	position: relative;
	display: flex;
	margin-left: 0;
	color: #fff;
	padding: 2.0em 80px 2.0em 0;
	border-bottom: 1px solid #ADADAD;
}


	
/*********** PICK UP ***********/

.top_pick article {
	position: relative;
	width: calc(50% - 40px);
}
	

/*********** CLIENT ***********/

.top_client .layout_box {
	display: block;
}
.top_client .layout_box .body {
	margin-left: 0;
}

	
}



@media screen and (max-width: 767px) {

/*********** KV ***********/
	
.kv {
	width: 100vw;
	height: 650px;
	background: url("../images/top/kv_bg_sp.png") center / cover;
}
.kv .bg_wh,.kv .mat {
	position: absolute;
	width: 100%;
	height: 650.5px;
	top:0;
	left: 0;
	z-index: 9990;
}
.kv .bg_wh img,.kv .mat img {
	width: 100%;
	height: 650.5px;
}
.kv > .box {
	height: 650px;
	width: 360px;
	margin: auto;
}
.kv .cc {
	position: absolute;
	top: 27%;
	left: 5%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	color: #fff;
	font-size: 45px;
	line-height: 1.3;
}
.kv h1 span {
	font-size: 0.5em;
	display: block;
}
.kv > .box .redline {
	position: absolute;
	width: 50%;
	bottom: 0;
	right: 20%;
}
.kv > .box .member {
	position: absolute;
	width: 110%;
	bottom: 0;
	right: -18%;
}
	
/*********** PHILOSOPHY ***********/

.top_philosophy {
	padding-top: 430px;
	padding-bottom: 100px;
}
.top_philosophy .img_bg {
	position: absolute;
	width: 150%; 
	top: -5%;
	left: -40%;
	right: 0;
	margin: auto;
	z-index: 0;
}
.top_philosophy .img_main {
	position: absolute;
	width: 180px;
	top:0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}
.top_philosophy .img_1 {
	position: absolute;
	width: 140px;
	top: 50px;
	left: -75%;
	right: 0;
	margin: auto;
	z-index: 2;
}
.top_philosophy .img_2 {
	position: absolute;
	width: 120px;
	top: 180px;
	left: 0;
	right: -75%;
	margin: auto;
	z-index: 2;
}
.top_philosophy .img_3 {
	position: absolute;
	width: 100px;
	top: 300px;
	left: 0;
	right: -35%;
	margin: auto;
	z-index: 2;
}
.top_philosophy .box {
	position: relative;
	width: 100%;
	margin-left: auto;
	line-height: 2.1;
	z-index: 10;
}
	
/*********** WORKS ***********/

.top_works {
	position: relative;
	padding: 0 0 30px;
	margin-top: 0;
}
.top_works article {
	position: relative;
	width: 100%; 
	margin: 0 auto 15%;
}
.top_works article .img_bg {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
}
.top_works article .col2_box {
	position: relative;
	width: 100%;
	align-items: center;
	z-index: 1;
}

.top_works article .col2_box > div:last-child {
	width: 100%;
}
.top_works article dl dt {
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 0px;
	margin-top: 10px;
}
	
/*********** INFO ***********/

.top_info .inner_L {
	display: block;
}
.top_info .body dl {
	position: relative;
	display: block;
	margin-left: 0;
	color: #fff;
	padding: 2.0em 80px 2.0em 0;
	border-bottom: 1px solid #ADADAD;
}
.top_info .body dl dt {
	margin-bottom: 0.8em;
}
.top_info .body dl dd {
	width: 100%;
}
	
/*********** PICK UP ***********/

.top_pick article {
	position: relative;
	width: calc(100% - 12px);
	margin-bottom: 5px;
}
.top_pick article:nth-child(2),
.top_pick article:nth-child(3),
.top_pick article:nth-child(4),
.top_pick article:nth-child(5) {
    margin-top: 0;
}
.top_pick article .btn_left_area {
	margin-right: auto;
	text-align: left;
}
.top_pick article p {
	position: absolute;
	top: 83px;
	right: -100px;
	transform: rotate(90deg);
	display: inline-block;
	font-size: 10px;
}
.top_pick article:nth-child(2) p {
	position: absolute;
	top: 93px;
	right: -110px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(3) p {
	position: absolute;
	top: 115px;
	right: -130px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(4) p {
	position: absolute;
	top: 90px;
	right: -105px;
	transform: rotate(90deg);
	display: inline-block;
}
.top_pick article:nth-child(5) p {
	position: absolute;
	top: 80px;
	right: -98px;
	transform: rotate(90deg);
	display: inline-block;
}

/*********** CLIENT ***********/

.top_client .layout_box {
	display: block;
}
.top_client .layout_box .body {
	margin-left: 0;
}

	

}