@charset "UTF-8";

.risk-wrap{
	line-height: 1.8;
	margin: 20px auto 0;
	width: 85%;
}
.risk-wrap .box{
	display: flex;
}
.risk-wrap > .box+.box{
	margin-top: 10px;
}
.risk-wrap .box .txt-title{
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	writing-mode: vertical-rl;
}
.risk-wrap .box .detail-wrap{
	margin: 10px 0 10px 20px;
}
.risk-wrap .box .detail-inner+.detail-inner{
	margin-top: 10px;
}
.risk-wrap .box.box .txt-dt{
	font-weight: bold;
}
.risk-wrap .box.box .txt-head{
	font-size: 1.4rem;
	margin-right: 5px;
}
.risk-wrap .box.box .small{
	font-size: 1.4rem;
}


.risk-wrap .box.pt1 .txt-title{
	background-color: #FBC93B;
}
.risk-wrap .box.box.pt1 .txt-dt{
	border-bottom: 1px solid #FBC93B;
	display: inline;
}
.risk-wrap .box.box.pt1 .txt-head{
	color: #FBC93B;
}
.risk-wrap .box.pt2 .txt-title{
	background-color: #B7B5B3;
}
.risk-wrap .box.box.pt2 .txt-dt{
	border-bottom: 1px solid #B7B5B3;
	display: inline;
}
.risk-wrap .box.box.pt2 .txt-head{
	color: #B7B5B3;
}
.risk-wrap .box.pt3 .txt-title{
	background-color: #A9CF52;
}
.risk-wrap .box.box.pt3 .txt-dt{
	border-bottom: 1px solid #A9CF52;
	display: inline;
}
.risk-wrap .box.box.pt3 .txt-head{
	color: #A9CF52;
}

.process-area {
	background: url(/sustainability/materiality/idetification-process/image/process_bg.png) left repeat-y;
	background-size: 118px;
}
.process-area li {
	display: flex;
	align-items:center;
	position: relative;
	border-bottom: 5px solid #fff;
}
.process-area .process-left{
	width:120px;
	padding: 10px 5px 0 5px;
	position: relative;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	color:#1432aa;
}
.process-area li::before{
	content: '';
	position: absolute;
	bottom: -16px;
	left: 57px;
	width: 1px;
	height: 61px;
	background-color: #1432aa;
	transform-origin: 50% calc(100% - 2px);
}
.process-area li::after{
	content: '';
	position: absolute;
	bottom: -16px;
	left: 60px;
	width: 1px;
	height: 61px;
	background-color: #1432aa;
	transform-origin: 50% calc(100% - 2px);
}
.process-area li::before{
	transform: rotate(-76deg);
}
.process-area li::after{
	transform: rotate(76deg);
}

.process-area .process-right{
	width: calc(100% - 120px);
	padding: 15px 5px 15px 5px;
	line-height: 1.6;
	font-size: 1.4rem;
	border-bottom: 1px solid #ccc;
	margin-left: 15px;
}
.process-area .process-right.border-t{
	border-top: 1px solid #ccc;
}
.process-area .process-right .process-box{
	width: 100%;
	margin-top: 20px;
	padding:10px;
	display: inline-block;
	background-color: #eee;
}
.process-area .process-right strong{
	color:#1432aa;
}
.process-area .process-right .process-box strong{
	font-size:1.4rem;
}

@media print, (min-width: 768px) {
	.process-area {
		margin-top: 32px;
		margin-bottom: 60px;
		background-size: 175px;
	}
	.process-area .process-left{
		width:180px;
		padding: 24px 10px 0 10px;
		font-size: 1.5rem;
	}
	.process-area .process-right{
		width: 680px;
		padding: 20px 0 20px 15px;
		line-height: 1.4;
	}
	.process-area .process-right .process-box{
		width: 318px;
	}
	.process-area li::before{
		height: 92px;
    left: 87px;
		bottom: -23px;
	}
	.process-area li::after{
		height: 88px;
    left: 91px;
		bottom: -23px;
	}
	.process-area .process-right .process-box{
		padding:15px;
		text-align: center;
	}
	.process-area .process-right .process-box + .process-box {
		margin-left: 4px;
	}
}