@charset "utf-8";
/* ===========================================================
 CSS information
 file name : candidates.css
 style info : 職種相関の図 page style
============================================================== */

@media print,
screen and (min-width: 751px) {
	.correlationdiagram_ttl {
		display: inline-block;
		margin: 0 0 28px;
		padding: 0 0 5px;
		color: #e2002b;
		font-size: 17px;
		font-weight: bold;
		letter-spacing: 2px;
		border-bottom: 6px solid #d5002b;
	}



	.correlationdiagram__tab {
		width: 724px;
		margin: 20px auto 0;
		letter-spacing: -0.5em;
		text-align: center;
	}

	.correlationdiagram__tab li {
		position: relative;
		display: inline-block;
		width: 227px;
		margin: 0 7px;
		padding: 15px 0;
		border: 1px solid #e2002b;
		background-color: #FFF;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 2px;
		color: #e2002b;
		text-align: center;
	}

	.correlationdiagram__tab li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		border-style: solid;
		border-width: 0 10px 12px 10px;
		border-color: transparent transparent #e2002b;
		translate: -50% -100%;
	}

	.correlationdiagram__tab li::after {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		border-style: solid;
		border-width: 0 8.8px 10.8px 8.8px;
		border-color: transparent transparent #FFF;
		translate: -50% -100%;
	}


	.correlationdiagram__tab li.act {
		position: relative;
		display: inline-block;
		width: 227px;
		margin: 0 7px;
		padding: 15px 0;
		border: 1px solid #e2002b;
		background-color: #e2002b;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 2px;
		color: #fff;
		text-align: center;
	}

	.correlationdiagram__tab li.act:after {
		border-color: transparent transparent #e2002b transparent;
	}

	.correlationdiagram__tab li:hover {
		cursor: pointer;
		opacity: 0.7;
	}

	.correlationdiagram__tab li.act:focus {
		outline-color: #fff;
		outline-offset: -3px;
	}



	.correlationdiagram_wrap {
		width: 1000px;
		border: 20px solid #f6f6f6;
		padding: 40px;
		background: #fff;
	}

	.correlationdiagram_box {}

	.correlationdiagram {
		border: 5px solid #e8e8e8;
		padding: 25px;
		width: 880px;
		display: grid;
		grid-template-columns: 604px 191px;
		grid-template-rows: 122px 122px 122px;
		gap: 31px 25px;
		grid-auto-flow: row;
		grid-template-areas:
			"sales_area businessoparation_area"
			"production_area businessoparation_area"
			"rd_area businessoparation_area";
		position: relative;
		margin-top: -20px;
	}

	.correlationdiagram>div {
		position: relative;
	}

	.sales_area {
		grid-area: sales_area;
		background: #e1e7f1;
		border: 2px solid #d0d9e8;
	}

	.production_area {
		grid-area: production_area;
		background: #fbefdd;
		border: 2px solid #f7e0c1;
	}

	.rd_area {
		grid-area: rd_area;
		background: #e2f1ee;
		border: 2px solid #cde6e1;
	}

	.businessoparation_area {
		align-self: stretch;
		grid-area: businessoparation_area;
		background: #f1ebed;
		border: 2px solid #e8dee1;
		display: grid;
		place-content: center;
		place-items: center;
	}

	.sales_area::before,
	.production_area::before,
	.rd_area::before {
		content: '';
		background: url(/assets/img/project/recruit/job/correlation/correlationdiagram_arrow_h.svg) no-repeat center center / cover;
		width: 41px;
		height: 24px;
		position: absolute;
		right: -35px;
		top: 50px;
		z-index: 1;
	}

	.sales_area::before {
		transform: rotate(33deg);
	}

	.rd_area::before {
		transform: rotate(-25deg);
	}

	.sales_area::after,
	.production_area::after {
		content: '';
		background: url(/assets/img/project/recruit/job/correlation/correlationdiagram_arrow_v.svg) no-repeat center center / cover;
		width: 24px;
		height: 41px;
		position: absolute;
		left: calc(50% - 12px);
		bottom: -38px;
		z-index: 1;
		;
	}





	.sec_btn {
		display: flex;
		width: 467px;
		height: 46px;
		background: #000;
		color: #fff;
		position: relative;
		font-size: 18px;
		align-items: center;
		justify-content: center;
		padding-right: 30px;
		margin: 14px auto 16px;
	}

	.sec_btn::after {
		content: '';
		background: url(/assets/img/project/recruit/job/correlation/correlationdiagram-btnarrow.svg) center top / cover no-repeat;
		background-size: 24px;
		width: 24px;
		height: 24px;
		position: absolute;
		right: 10px;
		top: calc(50% - 12px);
	}

	.sec_btn.-sales {
		background: #6988b7;
		box-shadow: 4px 8px 0px 0px #2f5896;
	}

	.sec_btn.-production {
		background: #eeba71;
		box-shadow: 4px 8px 0px 0px #bd8433;
	}

	.sec_btn.-rd {
		background: #70b7a9;
		box-shadow: 4px 8px 0px 0px #529b8d;
	}

	.sec_btn.-bo {
		width: 147px;
		height: 46px;
		padding-right: 0;
		background: #a17783;
		box-shadow: 4px 8px 0px 0px #7a4f5b;
	}

	.sec_btn.-bo::after {
		content: none;
	}

	.correlationdiagram .sec_list {
		display: flex;
		gap: 6px;
		justify-content: center;
	}

	.correlationdiagram .sec_list li {
		background: #aaaaaa;
		color: #fff;
		font-size: 13px;
		padding: 2px 12px;
	}

	.correlationdiagram .sec_list.wide li {
		padding: 2px 24px;
	}

	.correlationdiagram_customer {
		position: relative;
		z-index: 1;
	}

	.correlationdiagram_arrows {
		position: absolute;
		top: -5px;
		left: -5px;
	}

	.correlationdiagram .txtlink {
		color: #e4002b;
		font-size: 14px;
		text-align: right;
		margin-top: 12px;
	}

	.correlationdiagram .txtlink span {
		font-weight: bold;
		position: relative;
		padding-right: 12px;
	}

	.correlationdiagram .txtlink.sales_base span::before {
		content: '';
		display: inline-block;
		width: 31px;
		height: 32px;
		position: absolute;
		left: -33px;
		top: -17px;
		margin-right: 5px;
		background: url('/assets/img/project/recruit/job/correlation/correlationdiagram_ico_sales.png') no-repeat 0 0;
	}

	.correlationdiagram .txtlink.production_base span::before {
		content: '';
		display: inline-block;
		width: 48px;
		height: 23px;
		position: absolute;
		left: -52px;
		top: -9px;
		margin-right: 5px;
		background: url('/assets/img/project/recruit/job/correlation/correlationdiagram_ico_production.png') no-repeat 0 0;
	}

	.correlationdiagram .txtlink span::after {
		content: '';
		width: 8px;
		height: 8px;
		border: 0;
		border-top: solid 2px #e4002b;
		border-right: solid 2px #e4002b;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	/* 除外 */
	li.exception {
		background: #dedede !important;
	}

	a.exception {
		background: #dedede !important;
		box-shadow: 4px 8px 0px 0px #d6d6d6 !important;
		pointer-events: none
	}

	div.exception {
		background: #f8f8f8;
		border: 2px solid #dedede;
	}

}



@media screen and (max-width: 750px) {
	.correlationdiagram_ttl {
		display: inline-block;
		margin: 0px 24px 30px 24px;
		margin: 0vw 3.2vw 7.6923vw 3.2vw;
		padding: 0px 0px 10px 0px;
		padding: 0vw 0vw 2.66667vw 0vw;
		color: #e2002b;
		font-size: 20px;
		font-size: 5.33333vw;
		font-weight: bold;
		line-height: 27px;
		line-height: 7.2vw;
		letter-spacing: 2px;
		letter-spacing: 0.53333vw;
		border-bottom: solid #d5002b;
		border-width: 5px;
		border-width: 1.33333vw;
	}


	.correlationdiagram_wrap {
		width: 100%;
	}

	.correlationdiagram {
		width: 100%;
		display: grid;
		grid-template-columns: 74.3589vw 13.0769vw;
		grid-template-rows: auto;
		gap: 7.9487vw 5.3846vw;
		grid-auto-flow: row;
		grid-template-areas:
			"sales_area businessoparation_area"
			"production_area businessoparation_area"
			"rd_area businessoparation_area";
		position: relative;
		margin-top: -2.5vw;
	}

	.sales_area {
		grid-area: sales_area;
		background: #e1e7f1;
		border: 2px solid #d0d9e8;
	}

	.production_area {
		grid-area: production_area;
		background: #fbefdd;
		border: 2px solid #f7e0c1;
	}

	.rd_area {
		grid-area: rd_area;
		background: #e2f1ee;
		border: 2px solid #cde6e1;
	}

	.businessoparation_area {
		align-self: stretch;
		grid-area: businessoparation_area;
		background: #f1ebed;
		border: 2px solid #e8dee1;
		display: grid;
		place-content: center;
		place-items: center;
	}

	.correlationdiagram>div {
		position: relative;
	}


	.sales_area::before,
	.production_area::before,
	.rd_area::before {
		content: '';
		background: url(/assets/img/project/recruit/job/correlation/correlationdiagram_arrow_h.svg) no-repeat center center / cover;
		width: 10.5128vw;
		height: 6.1538vw;
		position: absolute;
		right: -8vw;
		top: calc(50% - 2vw);
		z-index: 1;
	}

	.rd_area::before {
		transform: rotate(-33deg);
	}

	.sales_area::before {
		transform: rotate(25deg);
	}

	.sales_area::after,
	.production_area::after {
		content: '';
		background: url(/assets/img/project/recruit/job/correlation/correlationdiagram_arrow_v.svg) no-repeat center center / cover;
		width: 6.1538vw;
		height: 10.512vw;
		position: absolute;
		left: 10.256vw;
		bottom: -38px;
		z-index: 1;
		;
	}

	.sec_btn {
		display: flex;
		width: 69.2307vw;
		height: 7.6923vw;
		background: #000;
		color: #fff;
		position: relative;
		font-size: 3.8461vw;
		align-items: center;
		justify-content: center;
		padding: 1.0256vw 3.8461vw 0 0;
		margin: 2.0512vw auto;
		line-height: 1;
		font-weight: bold;
	}

	.sec_btn::after {
		content: '';
		background: url(/assets/img/project/recruit/job/correlation/correlationdiagram-btnarrow.svg) center top / cover no-repeat;
		width: 4.6153vw;
		height: 4.6153vw;
		position: absolute;
		right: 2.564vw;
		top: calc(50% - 2.3vw);
	}

	.sec_btn.-sales {
		background: #6988b7;
		box-shadow: 4px 7px 0px 0px #2f5896;
		box-shadow: 1.0256vw 1.7948vw 0px 0px #2f5896;
	}

	.sec_btn.-production {
		background: #eeba71;
		box-shadow: 1.0256vw 1.7948vw 0px 0px #bd8433;
	}

	.sec_btn.-rd {
		background: #70b7a9;
		box-shadow: 1.0256vw 1.7948vw 0px 0px #529b8d;
	}

	.sec_btn.-bo {
		width: 7.6923vw;
		height: auto;
		padding: 8vw 0;
		background: #a17783;
		box-shadow: 1.0256vw 1.7948vw 0px 0px #7a4f5b;
		writing-mode: vertical-rl;
	}

	.sec_btn.-bo::after {
		content: none;
	}

	.correlationdiagram .sec_list {
		padding: 1.0256vw 3vw;
		display: inline-block;
	}

	.correlationdiagram .sec_list li {
		display: inline-block;
		background: #aaaaaa;
		color: #fff;
		font-size: 12px;
		font-size: 3.0769vw;
		padding: 2px 8px;
		padding: 0.5128vw 2.0512vw;
		margin-top: 1.0256vw;
	}

	.correlationdiagram_customer {
		position: relative;
		z-index: 1;
	}

	.correlationdiagram_arrows {
		position: absolute;
		top: -5px;
		left: -5px;
	}

	.correlationdiagram .txtlink {
		color: #e4002b;
		font-size: 13px;
		font-size: 3.3333vw;
		text-align: right;
		position: absolute;
		right: 0;
		bottom: -30px;
		bottom: -7.6923vw;
		z-index: 2;
	}

	.correlationdiagram .txtlink span {
		font-weight: bold;
		position: relative;
		padding-right: 12px;
		padding-right: 3.0769vw;
	}

	.correlationdiagram .txtlink.sales_base span::before {
		content: '';
		display: inline-block;
		width: 31px;
		width: 7.9487vw;
		height: 32px;
		height: 8.2051vw;
		position: absolute;
		left: -33px;
		left: -8.4615vw;
		top: -17px;
		top: -4.3589vw;
		margin-right: 5px;
		margin-right: 1.282vw;
		background: url('/assets/img/project/recruit/job/correlation/correlationdiagram_ico_sales.png') no-repeat 0 0;
	}

	.correlationdiagram .txtlink.production_base span::before {
		content: '';
		display: inline-block;
		width: 48px;
		width: 12.3076vw;
		height: 23px;
		height: 5.8974vw;
		position: absolute;
		left: -52px;
		left: -13.333vw;
		top: -9px;
		top: -2.3076vw;
		margin-right: 5px;
		margin-right: 1.282vw;
		background: url('/assets/img/project/recruit/job/correlation/correlationdiagram_ico_production.png') no-repeat 0 0;
	}

	.correlationdiagram .txtlink span::after {
		content: '';
		width: 8px;
		height: 8px;
		border: 0;
		border-top: solid 2px #e4002b;
		border-right: solid 2px #e4002b;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}





}