/* CSS Document */

.p-catch_area{
	height: 427px;
	min-width: 1160px;
	background: url("/tech/katri/about_us/materiality/images/bg_chatch.jpg") no-repeat 50% 50%;
	background-size: cover;
	margin-bottom: 2rem;
}

.p-catch_area__inner{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	line-height: 1.5;
	font-weight: 500;
	color: #fff;
	padding: 0 0.5rem 0.5rem 0;
	text-align: center;
}

.sp .p-catch_area{
	min-width: 100%;
	height: 200px;
}
.sp .p-catch_area__inner{	
	font-size: 1.125rem;
}

/*p-materiality_chart*/
.p-materiality_chart{
	margin: 3rem 0;
	position: relative;
}

.p-materiality_chart__area{
	position: absolute;
	height: 100%;
	top:0px;
}
.p-materiality_chart__area.society{
	left:0px;
	width: 42.33%;
}

.p-materiality_chart__area.eco{
	left:43.02%;
	width: 13.97%;
}

.p-materiality_chart__area.sustainability{
	right:0px;
	width: 42.33%;
}


/*------------------------
materiality_ctg
---------------------------*/
.p-materiality_ctg{
	background-color: #e0e0e0;
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
	margin-bottom: 0.75rem;
}
h2.p-materiality_ctg__title{
	margin-bottom: 1.5rem;
}
.p-materiality_ctg__box{
	/*border-top: #555 4px solid;*/
}

.p-materiality_label{
	/*margin-top: -0.5rem;*/
}
.p-materiality_label__txt{
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	width: 100%;
	display: inline-block;
	padding: 0.4375rem 1.875rem;
	background-color: #d5d5d5;
	color: #fff;
	border-radius: 4px 4px 0 0;
}

/*society*/
.p-materiality_ctg.society{
	background-color: #DEE5EF;
}
.society h2.p-materiality_ctg__title{
	color: #305A9C;
}
.society .p-materiality_ctg__box{
	border-color: #305A9C;
}
.society .p-materiality_label__txt{
	background-color: #305A9C;
}
.society .p-lb_frontline{
	background-color: #305A9C;
}

/*eco*/
.p-materiality_ctg.eco{
	background-color: #D3E6DC;
}
.eco h2.p-materiality_ctg__title{
	color: #248052;
}
.eco .p-materiality_ctg__box{
	border-color: #248052;
}
.eco .p-materiality_label__txt{
	background-color: #248052;
}
.eco .p-lb_frontline{
	background-color: #248052;
}

/*sustainability*/
.p-materiality_ctg.sustainability{
	background-color: #F2DFE2;
}
.sustainability h2.p-materiality_ctg__title{
	color: #B03648;
}
.sustainability .p-materiality_ctg__box{
	border-color: #B03648;
}
.sustainability .p-materiality_label__txt{
	background-color: #B03648;
}
.sustainability .p-lb_frontline{
	background-color: #B03648;
}

/*p-materiality_img*/
.p-materiality_img{
	position: relative;
	margin-top: 0.3125rem;
}
.p-materiality_img__txt{
	position: absolute;
	width: 100%;
	bottom:0px;
	left: 0px;
	padding: 0.625rem 2rem 0.625rem 0.625rem;
	background-color: rgba(0,0,0,0.6);
	color: #fff;
	line-height: 1.5;
	font-size: 1.125rem;
}
.p-materiality_img__txt::after{
	content: "";
	display: block !important;
	width: 14px;
	height: 26px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -14px;
	background: url("/tech/katri/common/images/arrow_right_m_wh.svg") no-repeat 50% 50%;
}
.p-lb_frontline{
	position: absolute;
	width: auto;
	top: 0px; left: 0px;
	color: #fff;
	line-height: 1.5;
	font-size: 0.875rem;
	padding: 0.25rem 0.875rem;
	margin-bottom: 0.125rem;
	border-radius: 0px 0px 4px 0px;
}

/*p-rel_tech*/
.p-rel_tech{
	border-top: #C0C5CC 1px solid;
	margin-top: 1.875rem;
}
h4.p-rel_tech__headng{
	font-size: 1.125rem;
	line-height: 1;
	font-weight: 500;
	margin: 0.875rem 0 1.5rem;
	color: #6D7983;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
h4.p-rel_tech__headng .shoulder{
	flex: 0 0 auto;
	width: auto;
	padding-right: 0.25rem;
	font-weight: 400;
	font-size: 0.8125rem;
	letter-spacing: 0;
	/*color: #555;*/
}
.p-rel_tech__list{
	line-height: 1.5;
	font-size: 0.875rem;
}
.p-rel_tech__list li{
	flex: 0 0 auto;
	width: calc((100% - 10px)/2);
	margin-bottom: 0.5rem;
	text-align: left;
}
.p-rel_tech__list li.span-2{
	width: 100%;
}
.p-rel_tech__list li a,
.p-rel_tech__list li span{
	display: block;
	padding: 0.5rem 0.875rem;
	border-radius: 3px;
	color: #212121;
	background-color: #EDEFF2;
	height: 100%;
}
.p-rel_tech__list li a{
	padding-left: 1.25rem;
	background: #EDEFF2 url("/common/image/arrow_red.png") no-repeat 0.5rem 0.875rem;
	text-decoration: none;
	transition: background 0.3s;
}
.p-rel_tech__list li a:hover{
	background-color:#D9DEE4;
}

/*sp*/
.sp .p-rel_tech__list{
	margin-bottom: 1.5rem;
}
.sp .p-rel_tech__list li{
	width: 100%;
}
.sp .p-materiality_img__txt{
	padding: 0.5rem 2rem 0.5rem 0.625rem;
	font-size: 1rem;
}
.sp h4.p-rel_tech__headng{
	display: block;
	text-align: center;
	padding-right: 0.5rem;
}
.sp h4.p-rel_tech__headng .shoulder{
	display: block;
	font-size: 0.625rem;
	margin: 0.5rem 0 0;
	padding: 0;
}