@charset "utf-8";
/*------------------------------------------------------------
	careerstory01
------------------------------------------------------------*/
#main {
	padding: 2.2rem 0 15.8rem;
}
#main .bgBox {
	margin-bottom: 11.9rem;
	padding-top: 14.4rem;
	position: relative;
	background-color: #FF9F53;
}
#main .bgBox .line {
	width: 73.2rem;
	margin-left: -73.6rem;
	bottom: -15.2rem;
	z-index: 1;
}
#main .bgBox::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 35.2rem;
	background-color: #fff;
	content: "";
	clip-path: polygon(100% 0, 0 0, 0 100%);
}
#main .mainImg {
	margin-bottom: 15.6rem;
}
#main .mainImg .phoBox {
	position: relative;
}
#main .mainImg .heading01 {
	width: 28.8rem;
	position: absolute;
	right: 18.2rem;
	top: -11.8rem;
}
#main .mainImg .heading02 {
	position: absolute;
	width: 64.6rem;
	left: 5.7rem;
	bottom: -8.5rem;
	z-index: 1;
}
#main .mainImg .ttlImg {
	width: 43.1rem;
	margin: 5rem 0 0 auto;
}
#main .infoBox {
	margin-bottom: 2.8rem;
	position: relative;
}
#main .infoBox:last-child {
	margin-bottom: 0 !important;
}
#main .infoBox.white::before {
	position: absolute;
	left: 0;
	top: -52.2rem;
	width: 100%;
	bottom: 8.2rem;
	background-color: #fff;
	clip-path: polygon(0 35.2rem, 100% 0, 100% calc(100% - 35.2rem), 0% 100%);
	content: "";
}
#main .imgBox {
	width: 96rem;
	margin: 0 auto;
	padding-bottom: 9.5rem;
	position: relative;
}
#main .imgBox .border {
	position: absolute;
	left: 8rem;
	top: 6.6rem;
	bottom: 0;
	width: 1px;
	content: "";
	z-index: 1;
}
#main .imgBox .border span {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #000;
}
#main .imgBox .title {
	margin: 0 -2rem 2rem 0.3rem;
	height: 21.2rem;
}
#main .imgBox .title img {
	width: auto;
	height: 100%;
}
#main .imgBox p {
	margin: 5.2rem 0 0 15.3rem;
	line-height: 2.06;
	text-align: justify;
	letter-spacing: 0.05em;
}
#main .imgBox .pho {
	margin-top: 7.1rem;
	position: relative;
	z-index: 2;
}
#main .imgBox .pho .img {
	position: absolute;
	right: -17.4rem;
	bottom: -7.4rem;
	width: 34.7rem;
}
#main .infoBox .line01 {
	width: 72.3rem;
	margin-left: -15rem;
	top: -4rem;
}
#main .infoBox .line02 {
	width: 73.2rem;
	margin-left: -107rem;
	top: -8rem;
	z-index: 1;
}
#main .infoBox .line03 {
	width: 74.2rem;
	margin-left: -2rem;
	top: -23.5rem;
	z-index: 2;
}
#main .btmBox {
	position: relative;
	background: url(../img/careerstory01/btm_bg.png) no-repeat top center;
	background-size: cover;
}
#main .btmBox .title {
	width: 49.1rem;
	position: absolute;
	left: -7.9rem;
	top: -4.1rem;
}
#main .btmBox .textBox {
	width: 56rem;
	padding: 12rem 0 6.7rem 5.3rem;
	position: relative;
}
#main .btmBox .textBox p {
	line-height: 2.06;
	text-align: justify;
	letter-spacing: 0.05em;
}
#main .note {
	width: 114rem;
	margin: 3.6rem auto 0;
	text-align: right;
	font-size: 1.3rem;
	letter-spacing: 0.1em;
}
@media all and (min-width: 897px) {
	#main .comLine01 {
		margin-left: -106.3rem;
		top: -1rem;
		width: 92.5rem;
	}
}
@media all and (max-width: 896px) {
	#main {
		padding: 2.8rem 0 7.2rem;
	}
	#main .comLine01 {
		top: -1.9rem;
	}
	#main .bgBox {
		margin-bottom: 12.4rem;
		padding-top: 4.2rem;
	}
	#main .bgBox .line {
		width: 35.8rem;
		bottom: -9.2rem;
		left: -13.5rem;
	}
	#main .bgBox::before {
		height: 10.5rem;
		top: -0.1rem;
	}
	#main .mainImg {
		margin-bottom: 6.6rem;
	}
	#main .mainImg .heading01 {
		width: 14.4rem;
		right: 2.3rem;
		top: -6.1rem;
	}
	#main .mainImg .heading02 {
		width: 32.3rem;
		left: 0.6rem;
		bottom: -4.3rem;
	}
	#main .mainImg .ttlImg {
		width: 23.8rem;
		margin-top: 7rem;
	}
	#main .infoBox {
		margin-bottom: 0.9rem;
	}
	#main .infoBox.white::before {
		top: -22.7rem;
		bottom: 12.2rem;
		clip-path: polygon(0 10.4rem, 100% 0, 100% calc(100% - 10.4rem), 0% 100%);
	}
	#main .imgBox {
		width: auto;
		padding: 0 2rem 9.2rem;
	}
	#main .infoBox:last-child .imgBox {
		padding-bottom: 5rem;
	}
	#main .imgBox .border {
		left: 5.7rem;
		top: 3.9rem;
	}
	#main .imgBox .title {
		margin: 0 -2rem 2rem 0;
		height: 27.6rem;
	}
	#main .imgBox02 .title {
		height: 27.7rem;
	}
	#main .imgBox p {
		margin: 3.2rem 0 0 7.4rem;
		line-height: 2.03;
		letter-spacing: 0.01em;
	}
	#main .imgBox .pho {
		margin-top: 4.3rem;
	}
	#main .imgBox .pho .img {
		right: -7.3rem;
		bottom: auto;
		top: -2.5rem;
		width: 17.4rem;
	}
	#main .infoBox .line01 {
		width: 35.8rem;
		left: 6rem;
		top: -4.6rem;
	}
	#main .infoBox .line02 {
		width: 35.8rem;
		top: -7.8rem;
		left: -19.2rem;
	}
	#main .infoBox .line03 {
		width: 35.8rem;
		left: 6rem;
		top: -15rem;
	}
	#main .btmBox {
		background-image: url(../img/careerstory01/btm_bg_sp.png);
		background-position: bottom center;
	}
	#main .btmBox .title {
		width: 33.1rem;
		left: 2rem;
		top: -8.7rem;
	}
	#main .btmBox .textBox {
		width: auto;
		padding: 5.6rem 0 28.6rem 2rem;
	}
	#main .btmBox .textBox p {
		line-height: 2.03;
		letter-spacing: 0.02em;
	}
	#main .note {
		width: auto;
		margin: 3.9rem 1.2rem 0;
		font-size: 0.9rem;
	}
}
/*------------------------------------------------------------
	careerstory02
------------------------------------------------------------*/
#main.careerstory02 .bgBox {
	background-color: #CCA8E2;
}
#main.careerstory02 .btmBox {
	background-image: url(../img/careerstory02/btm_bg.png);
}
@media all and (min-width: 897px) {
	#main.careerstory02 .mainImg .heading02 {
		width: 56.4rem;
		left: 5.5rem;
		bottom: -9.8rem;
	}
	#main.careerstory02 .imgBox01 .title {
		height: 21.6rem;
	}
	#main.careerstory02 .imgBox02 .title {
		height: 21.3rem;
	}
	#main.careerstory02 .imgBox03 .title {
		height: 14.5rem;
	}
	#main.careerstory02 .btmBox .textBox {
		padding-top: 13.6rem;
	}
	#main.careerstory02 .btmBox .title {
		width: 38.9rem;
		left: -6.2rem;
		top: -1.7rem;
	}
}
@media all and (max-width: 896px) {
	 #main.careerstory02 .mainImg .heading02 {
		width: 28.2rem;
		bottom: -4.9rem;
	}
	#main.careerstory02 .imgBox01 .title {
		height: 27.9rem;
	}
	#main.careerstory02 .imgBox02 .title {
		height: 29.8rem;
	}
	#main.careerstory02 .imgBox03 .title {
		height: 25.7rem;
	}
	#main.careerstory02 .btmBox {
		background-image: url(../img/careerstory02/btm_bg_sp.png);
	}
	#main.careerstory02 .btmBox .title {
		width: 26.2rem;
		top: -5.9rem;
	}
	#main.careerstory02 .btmBox .textBox {
		padding-bottom: 29.7rem;
	}
}
/*------------------------------------------------------------
	careerstory04
------------------------------------------------------------*/
#main.careerstory04 .bgBox {
	background-color: #FFD641;
}
#main.careerstory04 .btmBox {
	background-image: url(../img/careerstory04/btm_bg.png);
}
@media all and (min-width: 897px) {
	#main.careerstory04 .mainImg .heading02 {
		width: 67.8rem;
		left: 5.5rem;
		bottom: -9rem;
	}
	#main.careerstory04 .mainImg .ttlImg {
		width: 38.8rem;
	}
	#main.careerstory04 .imgBox02 .title {
		height: 22.6rem;
	}
	#main.careerstory04 .imgBox03 .border {
		top: 0;
	}
	#main.careerstory04 .imgBox03 .title {
		margin: -3.9rem 0 0 15.5rem;
		height: 10.9rem;
	}
	#main.careerstory04 .btmBox .textBox {
		width: 64.5rem;
		padding: 11.2rem 0 5.7rem 3rem;
	}
	#main.careerstory04 .btmBox .title {
		width: 38.9rem;
		left: -6.2rem;
		top: -1.7rem;
	}
}
@media all and (max-width: 896px) {
	 #main.careerstory04 .mainImg .heading02 {
		width: 33.8rem;
		bottom: -4.5rem;
	}
	#main.careerstory04 .imgBox02 .title {
		height: 27.6rem;
	}
	#main.careerstory04 .imgBox03 .title {
		height: 25.7rem;
	}
	#main.careerstory04 .btmBox {
		background-image: url(../img/careerstory04/btm_bg_sp.png);
	}
	#main.careerstory04 .btmBox .title {
		width: 26.2rem;
		top: -5.9rem;
	}
}
/*------------------------------------------------------------
	careerstory03
------------------------------------------------------------*/
#main.careerstory03 .bgBox {
	background-color: #72CE7C;
}
#main.careerstory03 .btmBox {
	background-image: url(../img/careerstory03/btm_bg.png);
}
@media all and (min-width: 897px) {
	#main.careerstory03 .mainImg .heading02 {
		width: 76.7rem;
		left: 5.7rem;
		bottom: -9.2rem;
	}
	#main.careerstory03 .mainImg .ttlImg {
		width: 39.7rem;
	}
	#main.careerstory03 .imgBox02 .title {
		height: 14.5rem;
	}
	#main.careerstory03 .btmBox .textBox {
		width: 64rem;
		padding: 10.6rem 0 6.2rem 3.3rem;
	}
	#main.careerstory03 .btmBox .title {
		top: -5.6rem;
	}
}
@media all and (max-width: 896px) {
	#main.careerstory03 .mainImg {
		margin-bottom: 3rem;
	}
	#main.careerstory03 .mainImg .heading02 {
		width: 31.1rem;
		bottom: -8.1rem;
	}
	#main.careerstory03 .mainImg .ttlImg {
		width: 23.3rem;
		margin-top: 10.5rem;
	}
	#main.careerstory03 .infoBox .line01 {
		top: -1rem;
	}
	#main.careerstory03 .imgBox01 .title {
		height: 25.6rem;
	}
	#main.careerstory03 .imgBox02 .title {
		height: 19.2rem;
	}
	#main.careerstory03 .imgBox04 .title {
		height: 31.9rem;
	}
	#main.careerstory03 .btmBox {
		background-image: url(../img/careerstory03/btm_bg_sp.png);
	}
	#main.careerstory03 .btmBox .textBox {
		padding-bottom: 30.3rem;
	}
}