@charset "utf-8";

/*
 recruit index
==============================*/

/* rc_mv ----------*/
#rc_mv { width: 100%; height: 500px; background-image: url(/image/hsl/about/recruit_new/index/mv_1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
#rc_mv .rc_inner { position: relative; height: inherit; }
#rc_mv h1 { position: relative; top: calc(50% - 30px); display: block; color: #FFF; text-align: center; line-height: 1; font-size: 60px; font-weight: bold; }
#rc_mv a { position: absolute; bottom: 0; left: 0; right: 0; display: block; width: 100%; max-width: 380px; margin: auto; padding-top: 10px; color: #FFF; background-color: #000; text-align: center; text-decoration: none; line-height: 1.4; font-size: 14px; font-weight: bold; }
@media screen and (max-width:767px) {
	#rc_mv { height: 60vw; }
	#rc_mv h1 { font-size: 8vw; top: calc(50% - 4vw); }
	#rc_mv a { max-width: 60%; }
}

/* rc_about ----------*/
#rc_about {}
#rc_about .tw { display: flex; }
#rc_about .tw .w { position: relative; width: 50%; }
#rc_about .tw .w .btw { margin-top: 20px; }
#rc_about .tw .w1 { z-index: 10; }
#rc_about .tw .w2 { padding: 40px 20px; box-sizing: border-box; }
#rc_about .tw .w2:before { position: absolute; z-index: 1; top: 0; right: 0; content: ""; width: 120%; height: calc(100% + 20px); background-image: url(/image/hsl/about/recruit_new/infographics/mv.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; }
#rc_about .tw .w2:after { position: absolute; z-index: 2; top: -1px; left: -105%; content: ""; width: 100%; height: calc(100% + 22px); background-color: #FFF; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: skew(-30deg); transform: skew(-30deg); }
#rc_about .tw .w2 .rc_h2, #rc_about .tw .w2 p { position: relative; z-index: 2; }
#rc_about .tw .w2 .rc_h2 { /*color: #FFF;*/ text-align: right; }
#rc_about .tw .w2 .rc_h2 small { /*color: #FFF;*/ }
#rc_about .tw .w2 .btw { position: absolute; bottom: 0; right: 20px; width: 100%; text-align: right; }
@media screen and (max-width:965px) {
	#rc_about .tw { display: block; }
	#rc_about .tw .w { width: 100%; }
	#rc_about .tw .w1 { margin-bottom: 40px; }
	#rc_about .tw .w2:before { width: 100%; height: 100%; }
	#rc_about .tw .w2:after { display: none; }
	#rc_about .tw .w2 .btw { position: inherit; right: 0; }
}
@media screen and (max-width:428px) { /* iPhone 縦 s */
	#rc_about .tw .w .btw { text-align: center; }
	#rc_about .tw .w2 .rc_h2, #rc_about .tw .w2 p { text-align: center; }
}

/* rc_jourob ----------*/
#rc_jourob { width: 100%; overflow: hidden; padding-top: 30px !important; }
#rc_jourob .tw { display: flex; }
#rc_jourob .tw .w { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; box-sizing: border-box; }
#rc_jourob .tw .w .btw { position: absolute; bottom: 30px; width: 100%; }
#rc_jourob .tw .w1, #rc_jourob .tw .w3 { width: 37%; }
#rc_jourob .tw .w1 { background-image: url(/image/hsl/about/recruit_new/movie/mv.jpg); order: 1; }
#rc_jourob .tw .w1 .btw { right: 50px; text-align: right; }
#rc_jourob .tw .w2 { width: 26%; padding: 50px; order: 2; }
#rc_jourob .tw .w3 { background-image: url(/image/hsl/about/recruit_new/index/bg_3.jpg); order: 3; }
#rc_jourob .tw .w3 .btw { left: 50px; }
@media screen and (max-width:965px) {
	#rc_jourob .tw { flex-wrap: wrap; }
	#rc_jourob .tw .w1, #rc_jourob .tw .w3 { width: 50%; padding: 100px 10px; order: 0; }
	#rc_jourob .tw .w2 { width: 100%; padding-top: 0; order: 0; }
	#rc_jourob .tw .w .btw { position: inherit; bottom: 0; left: auto; right: auto; text-align: center; }
	#rc_jourob .tw .w .btw .bt { width: 100%; }
}
@media screen and (max-width:428px) { /* iPhone 縦 s */
	#rc_jourob { padding-top: 0 !important; }
	#rc_jourob .tw .w1, #rc_jourob .tw .w3 { width: 100%; padding: 100px 10px; }
}

/* rc_environment ----------*/
#rc_environment { background-image: url(/image/hsl/about/recruit_new/index/bg_4.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; box-sizing: border-box; }
#rc_environment .rc_h2 small { color: #CC0022; }
#rc_environment .tw { display: flex; }
#rc_environment .tw .w { width: calc(50% - 10px); padding: 20px 30px; background-color: #FFF; box-sizing: border-box; }
#rc_environment .tw .w:first-child { margin-right: 20px; }
#rc_environment .tw .w h3 { color: #CC0022; text-align: center; font-size: 36px; font-weight: bold; vertical-align: bottom; }
#rc_environment .tw .w h3 img { vertical-align: bottom; }
#rc_environment .tw .w .btw { margin-top: 30px; text-align: center; }
#rc_environment .tw .w .btw .bt {}

@media screen and (max-width:428px) { /* iPhone 縦 s */
	#rc_environment .tw { display: block; }
	#rc_environment .tw .w { width: 100%; }
	#rc_environment .tw .w:first-child { margin-right: 0; margin-bottom: 20px; }
	#rc_environment .tw .w h3 { font-size: 20px; }
	#rc_environment .tw .w h3 img { width: 30px; }
}