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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	共通
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
#introWrap #panNavi ul { color: #fff; padding-top: 5px; }
#introWrap #panNavi ul li a { color: #fff; }

#introWrap { max-width: 1960px; margin-left: auto; margin-right: auto; background: #014fa4 url("/parking/recruit/voice/images/voice_staff_introduction_bg_pc.png") no-repeat center top; }
#introWrap #introText { max-width: 1919px; margin-top: 165px; }

/*mv*/
#introWrap #mvSec { padding: 55px 20px 28px; position: relative; }
#introWrap #mvSec h1 { max-width: 296px; margin: 0 auto; width: 24vw; }
#introWrap #mvSec h2 { margin-top: 215px; text-align: center; font-size: 4.1rem; text-stroke: 8px #fff; -webkit-text-stroke: 8px #fff; paint-order: stroke; position: relative; z-index: 1; }
#introWrap #mvSec #mvArea #mvImg { max-width: 520px; width: 39vw; position: absolute; left: 50px; bottom: -2px; }
#introWrap #mvSec #mvArea #mvInner { width: 49%; max-width: 586px; margin-left: 46.1%; margin-top: 30px; }
#introWrap #mvSec #mvArea #mvInner #mvTextEntry { font-size: 1.7rem; font-weight: bold; line-height: 1.2; margin-top: 30px; margin-left: 12px; }
#introWrap #mvSec #mvArea #mvInner #mvTextName { font-size: 3rem; font-weight: bold; line-height: 1; margin-left: 12px; }
#introWrap #mvSec #mvArea #mvInner #mvTextName span { font-size: 1.7rem; }

/*qa*/
#introWrap .qaSec { position: relative; }
#introWrap .qaSec + .qaSec { margin-top: 60px; }
#introWrap .qaSec .contentsWrap { max-width: 875px; }
#introWrap .qaSec .contentsTitle { max-width: 834px; width: 67.2vw; margin: 0 auto; }
#introWrap .qaSec .qaArea { position: relative; margin-top: 30px; }
#introWrap .qaSec .qaArea p { width: 55%; font-size: 1.45rem; line-height: 1.8; }
#introWrap .qaSec .qaArea div { width: 63%; max-width: 520px; position: absolute; top: 12px; left: 57%; }

#introWrap .qaSec .qaArea.qaReverse p { margin-left: auto; }
#introWrap .qaSec .qaArea.qaReverse div { right: 57%; left: auto; }

#introWrap .qaSec .qaArea.qaPeople { margin-top: 13px; }
#introWrap .qaSec .qaArea.qaPeople p { width: 80%; }
#introWrap .qaSec .qaArea.qaPeople div { right: -100px; }

@media screen and (max-width: 1960px) {
	
	#introWrap { position: relative; }
	#introWrap #introText { margin-top: 8.5vw; }
}

@media screen and (max-width: 1240px) {
	
	/*mv*/
	#introWrap #mvSec  { padding-top: 4.8vw; }
	#introWrap #mvSec h2 { font-size: 5.2vw; margin-top: 17.3vw; }
	#introWrap #mvSec #mvArea #mvImg { left: 1vw; }
	#introWrap #mvSec #mvArea #mvInner { margin-top: 2.8vw; }
	#introWrap #mvSec #mvArea #mvInner #mvTextEntry { margin-top: 2.4vw; margin-left: 1vw; font-size: 2.2vw; }
	#introWrap #mvSec #mvArea #mvInner #mvTextName { font-size: 3.9vw; margin-left: 1vw; }
	#introWrap #mvSec #mvArea #mvInner #mvTextName span { font-size: 2.2vw; }
	
	/*qa*/
	#introWrap .qaSec .contentsWrap { padding: 0 20px; }
	#introWrap .qaSec .qaArea { margin-top: 2.4vw; }
	#introWrap .qaSec .qaArea p { width: 37vw; font-size: 1.85vw; }
	#introWrap .qaSec .qaArea div { width: 41.9vw; left: 38.5vw; }
	#introWrap .qaSec .qaArea.qaReverse div { right: 37.5vw; }
	
	#introWrap .qaSec .qaArea.qaPeople p { width: 54vw; }
	
}

@media screen and (max-width: 1040px) {
	
	#introWrap .qaSec .qaArea { display: flex; justify-content: space-between; align-items: center; }
	#introWrap .qaSec .qaArea.qaReverse { flex-direction: row-reverse; }
	#introWrap .qaSec .qaArea p { width: 38vw; }
	#introWrap .qaSec .qaArea div { width: 55vw; top: 1vw; position: relative; left: auto; right: -2vw; }
	#introWrap .qaSec .qaArea.qaReverse div { right: auto; left: -2vw; }
}

@media screen and (max-width: 750px) {
	
    #panNavi { min-height: 18vw; }
    
	#introWrap { background: #014fa4 url("/parking/recruit/voice/images/voice_staff_introduction_bg_sp.png") no-repeat center 15vw / 100%; }
	#introWrap #mvSec { padding-top: 0; padding-bottom: 7.5vw; }
	#introWrap #mvSec h1 { width: 40vw; }
	#introWrap #mvSec h2 { font-size: 9vw; margin-top: 32.3vw; }
	#introWrap #mvSec #mvArea { position: relative; margin-top: 1vw; }
	#introWrap #mvSec #mvArea #mvImg { width: 48vw; left: -20px; bottom: -20vw; }
	#introWrap #mvSec #mvArea #mvInner { width: 57vw; margin-top: 0; margin-left: 35vw; }
	#introWrap #mvSec #mvArea #mvInner #mvTextEntry { margin-top: 2.4vw; margin-left: 10vw; font-size: 3.5vw; line-height: 1.4; }
	#introWrap #mvSec #mvArea #mvInner #mvTextName { margin-left: 10vw; line-height: 1.2; font-size: 5.3vw; }
	#introWrap #mvSec #mvArea #mvInner #mvTextName span { font-size: 3.5vw; }
	
	#introWrap .qaSec { margin-top: 6vw; }
	#introWrap .qaSec .contentsTitle { width: 100%; }
	#introWrap .qaSec .qaArea { display: block; margin-top: 1.5vw; }
	#introWrap .qaSec .qaArea p { font-size: 4vw; width: 100%; line-height: 1.5; }
	#introWrap .qaSec .qaArea div,
	#introWrap .qaSec .qaArea.qaReverse div { width: calc(100% + 40px); position: relative; left: -20px; right: auto; top: 0; margin: 2vw auto 0; }
	#introWrap .qaSec .qaArea.qaPeople p { width: 100%; }
	#introWrap .qaSec .qaArea.qaPeople div { position: relative; right: 0; width: calc(100% + 40px); left: -20px; }
	
	#introWrap #introText { position: absolute; bottom: 0; margin: 0 7vw; }
	
}

/*flowSec*/
#flowSec { background: url("/parking/recruit/common/images/common_contents_bg02.png") repeat center center; padding: 15px 0 75px; }
#flowSec #flowArea { margin-top: 25px; background-color: #ffea01; border: solid 3px #004fa6; border-radius: 20px; padding: 4px 30px 27px; position: relative; }
#flowSec #flowArea #flowTxtInner { width: 72%; }
#flowSec #flowArea #flowTxtInner h3 { font-size: 2.5rem; color: #014da3; border-bottom: solid 3px #014fa4; padding-bottom: 2px; }
#flowSec #flowArea #flowTxtInner p { font-size: 1.45rem; line-height: 1.8; margin-top: 10px; }
#flowSec #flowArea #flowImg { max-width: 370px; width: 31%; position: absolute; right: 3%; bottom: 0; }

@media screen and (max-width: 1240px) {
	
	#flowSec { padding: 1.2vw 0 6vw; }
	#flowSec #flowArea { margin-top: 2vw; }
	#flowSec #flowArea #flowTxtInner h3 { font-size: 3.2vw; padding: 0.3vw 2.4vw 2.1vw; }
	#flowSec #flowArea #flowTxtInner p { font-size: 1.85vw; margin-top: 0.8vw; }

}

@media screen and (max-width: 750px) {
	
	#flowSec { padding: 4.5vw 0 10vw; }
	#flowSec #flowArea { margin-top: 7vw; padding: 1.5vw 3vw; border-width: 2px; border-radius: 15px; }
	#flowSec #flowArea #flowTxtInner { width: 100%; }
	#flowSec #flowArea #flowTxtInner h3 { font-size: 4.8vw; padding: 0; border-bottom-width: 2px; text-align: center; }
	#flowSec #flowArea #flowTxtInner p { width: 44vw; font-size: 4vw; margin-top: 2vw; line-height: 1.4; }
	#flowSec #flowArea #flowImg { width: 45vw; right: 2.8vw; }
}

/*messageSec*/
#messageSec { padding: 97px 0 72px; }
#messageSec #messageArea { border: solid 1px #3574b7; background-color: #dae4f0; border-radius: 20px; padding: 26px 26px 17px; position: relative; }
#messageSec #messageArea p { width: 76%; font-size: 1.45rem; line-height: 1.6; margin: 5px 0 10px auto; }
#messageSec #messageArea div { max-width: 282px; width: 23.6%; position: absolute; left: 0.8%; bottom: 0; }

@media screen and (max-width: 1240px) {
	
	#messageSec { padding: 8vw 0 6vw; }
	#messageSec #messageArea { padding: 2.1vw 2.1vw 1.9vw; }
	#messageSec #messageArea p { margin-top: 1.2vw; font-size: 1.85vw; }
	
}

@media screen and (max-width: 750px) {
	
	#messageSec { padding: 10vw 0 6vw; }
	#messageSec #messageArea { padding: 3.5vw 3.5vw 1.9vw; }
	#messageSec #messageArea p { font-size: 4vw; width: 100%; line-height: 1.4; margin-top: 2vw; }
	#messageSec #messageArea p span { display: block; swidth: 59%; margin-left: 41%; }
	#messageSec #messageArea div { width: 33%; left: 3.5%; }
	
}

/*otherSec*/
#otherSec { background: url("/parking/recruit/voice/images/voice_other_bg.png") no-repeat center 97px; padding: 45px 0 10px; }
#otherSec .contentsWrap { max-width: 845px; }
#otherSec h2 { font-size: 3rem; }
#otherSec #otherArea { background-color: #fff; border: solid 3px #004ea3; border-radius: 40px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); position: relative; }
#otherSec #otherArea a { display: block; height: 100%; }
#otherSec #otherArea #otherInner { position: relative; padding: 15px 30px; }
#otherSec #otherArea #otherInner #otherInfoTxtBox p { font-size: 2.1rem; line-height: 1.4; color: #004f9e; font-weight: bold; }
#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtEntry { font-size: 1.12rem; line-height: 1.4; margin-top: 12px; }
#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName { font-size: 2rem; line-height: 1; margin-top: 5px; }
#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName span { font-size: 1.25rem; }
#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtEntry,
#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName { font-weight: bold; color: #000; }
#otherSec #otherArea #otherInner #otherInfoImgBox { position: absolute; bottom: 0; right: 3.6%; width: 27.5%; max-width: 218px; }
#otherSec #otherArea #otherInfoLink { font-size: 2.1rem; color: #000; background-color: #ffea01; text-align: center; padding: 17px 22px; border-radius: 0 0 40px 40px; }
#otherSec #otherArea #otherInfoLink span { background: url("/parking/recruit/common/images/common_arrow_blue.png") no-repeat right 5px center / contain; padding: 0 16%; display: block; line-height: 1.3; transition: 0.2s; }

@media screen and (max-width: 1240px) {
	
	#otherSec { padding: 3.6vw 0 0.8vw; }
	#otherSec .contentsWrap { width: 69.1vw; }
	#otherSec h2 { font-size: 3.87vw; }
	#otherSec #otherArea #otherInner { padding: 1.2vw 2.4vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox p { font-size: 2.7vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtEntry { font-size: 1.5vw; margin-top: 1vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName { font-size: 2.58vw; margin-top: 0.4vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName span { font-size: 1.5vw; }
	#otherSec #otherArea #otherInner #otherInfoImgBox { width: 17.6vw; }
	#otherSec #otherArea #otherInfoLink { font-size: 2.7vw; padding: 1.4vw 1.8vw; }
	
}

@media screen and (max-width: 750px) {
	
	#otherSec { padding-top: 4.5vw; }
	#otherSec .contentsWrap { width: 100%; padding: 0 20px; }
	#otherSec h2 { font-size: 6vw; }
	#otherSec #otherArea { border-width: 2px; border-radius: 20px; }
	#otherSec #otherArea #otherInner { padding: 4.2vw 4vw 2vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox p { font-size: 5vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtEntry { font-size: 2.7vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName { font-size: 4.6vw; }
	#otherSec #otherArea #otherInner #otherInfoTxtBox #otherInfoTxtName span { font-size: 2.7vw; }
	#otherSec #otherArea #otherInner #otherInfoImgBox { width: 27vw; right: 0; }
	#otherSec #otherArea #otherInfoLink { font-size: 5.1vw; padding: 2.4vw 1.8vw; border-radius: 0 0 20px 20px; }
	

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	staff1.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*qa*/
#introWrap #qa02Sec { margin-top: 88px; }
#introWrap #qa03Sec { margin-top: 45px; }
#introWrap .qaSec .qaArea.qaPeople div { left: 42%; width: 100%; max-width: 730px; }


@media screen and (max-width: 1960px) {
	
	#introWrap #qa03Sec,
	#introWrap #qa03Sec .qaArea { position: static; }
	#introWrap .qaSec .qaArea.qaPeople div { width: 40%; top: auto; bottom: 0; left: 50%; }
}

@media screen and (max-width: 1550px) {
	#introWrap .qaSec .qaArea.qaPeople p { width: 75%; }
}

@media screen and (max-width: 1240px) {
	
	#introWrap #qa02Sec { margin-top: 7vw; }
	#introWrap #qa03Sec { margin-top: 3.6vw; }
	#introWrap .qaSec .qaArea.qaPeople div { width: 40vw; right: 2vw; left: auto; position: absolute; }
	
}

@media screen and (max-width: 750px) {
	
	#introWrap #qa02Sec,
	#introWrap #qa03Sec { margin-top: 9vw; }
	#introWrap .qaSec .qaArea.qaPeople div { position: relative; width: 100vw; }
	#introWrap .qaSec .qaArea.qaPeople p { width: 100%; }
	
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	staff2.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/

.introStaff2 #introWrap #mvSec #mvArea { margin-top: 10.5%; }
.introStaff2 #introWrap #mvSec #mvArea #mvImg { max-width: 710px; width: 710px; left: 1%; }
.introStaff2 #introWrap .qaSec .qaArea.qaPeople div { left: 50%; right: -1vw; }
.introStaff2 #flowSec #flowArea #flowImg { right: 1%; }
.introStaff2 #otherSec #otherArea #otherInner #otherInfoImgBox { width: 21vw; width: 32.5%; max-width: 263px; right: -0.4%; }


@media screen and (max-width: 1240px) {
	.introStaff2 #introWrap #mvSec #mvArea #mvImg { width: 54vw; }
	.introStaff2 #introWrap .qaSec .qaArea.qaPeople div { left: auto; }
	.introStaff2 #otherSec #otherArea #otherInner #otherInfoImgBox { width: 21vw; }
}

@media screen and (max-width: 750px) {
	
	.introStaff2 #introWrap #mvSec { padding-bottom: 0; }
	.introStaff2 #introWrap #mvSec #mvArea { margin-top: 1vw; }
	.introStaff2 #introWrap #mvSec #mvArea #mvImg { width: 58vw; bottom: -6.5vw; left: -20px; }
	
	.introStaff2 #flowSec #flowArea { padding-bottom: 10vw; }
	.introStaff2 #messageSec #messageArea p { Margin-bottom: 30px }
	
	.introStaff2 #otherSec #otherArea #otherInner #otherInfoImgBox { width: 30vw; right: -4vw; }
	
}