@charset "utf-8";
/*=============================================================
materiality contents Layout
=============================================================*/
#contents .atn{
	text-indent: -1.5em;
    margin-left: 1.5em;
}
#contents .atnNum{
	text-indent: -2em;
    margin-left: 2em;
}

#contents h3.color{
	display: grid;
	place-items: center start;
	font-size: 130%;
	position: relative;
	padding-left: 80px;
	height: 70px;
	margin: 2em 0 1em;
}
#contents h3.color::before{
    content: "";
  	background-size: contain;
	position: absolute;
    width: 67px;
	height: 70px;
	left: 0;
	top: 0;
 	bottom: 0;
	margin: auto;	
}
#contents h3.red{
	background: #fbe2df;
}

#contents h3.red::before{
  	background: url(/sustainability/highlight/img/materiality_ico01.png) no-repeat center;
  	
}
#contents h3.yellow{
	background: #fcefd9;
}

#contents h3.yellow::before{
  	background: url(/sustainability/highlight/img/materiality_ico02.png) no-repeat center;
  	
}
#contents h3.purple{
	background: #e9d8e6;
}

#contents h3.purple::before{
  	background: url(/sustainability/highlight/img/materiality_ico03.png) no-repeat center;
  	
}
#contents h3.navy{
	background: #d3d9ea;
}

#contents h3.navy::before{
  	background: url(/sustainability/highlight/img/materiality_ico04.png) no-repeat center;
  	
}
#contents h3.blue{
	background: #def1f3;
}

#contents h3.blue::before{
  	background: url(/sustainability/highlight/img/materiality_ico05.png) no-repeat center;
  	
}

#contents h4.square{
	font-size: 120%;
	padding: 15px 0 15px 20px;
	margin-top: 0.5em;
	position: relative;
}
#contents h4.square::before{
	content: "";
	display: block;
	width: 5px;
	height: 25px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

#contents h4.red::before{
  	background: #ea6757;
} 
#contents h4.yellow::before{
  	background: #efad4d;
}
#contents h4.purple::before{
  	background: #8e3c7e;
}
#contents h4.navy::before{
  	background: #264094;
}
#contents h4.blue::before{
  	background: #59bbc2;
}
#contents h5.gray{
	margin: 2rem 0 1rem;
	padding: 0.8%;
	background:#f3f3f3;
	border-radius: 30px;
	width: 375px;
	text-align: center;
}
#contents figure.left{
	width: 375px;
}
#contents figure.left img{
	display: block;
	margin: 0 auto;
}
#contents div.catch{
	position: relative;
	margin: 0 0 1rem;
	padding: 1rem 1rem 1rem 2rem;
	font-size: 100%;
	font-weight: normal;
}
#contents div.catch::before{
	content: "";
	position: absolute;
	width: 8px;
	height: auto;
	display: block;
	left: 0;
	top: 0;
	bottom: 0;
}
#contents div.Red{
	background: #fbe2df;
}
#contents div.Red::before,
#contents .Red li::before{
	background: #ea6757;
}
#contents div.Yellow{
	background: #fcefd9;
}
#contents div.Yellow::before,
#contents .Yellow li::before{
	background: #efad4d;
}
#contents div.Purple{
	background: #e9d8e6;
}
#contents div.Purple::before,
#contents .Purple li::before{
	background: #8e3c7e;
}
#contents div.Navy{
	background: #d3d9ea;
}
#contents div.Navy::before,
#contents .Navy li::before{
	background: #264094;
}
#contents div.Blue{
	background: #def1f3;
}
#contents div.Blue::before,
#contents .Blue li::before{
	background: #59bbc2;
}

#contents img.border{
	border: solid 1px #c9c9c9;
}
#contents ol{
  	margin: 1em;
  	padding: 0
}
#contents ol li{
	list-style: none;
  	padding-left: 1.3em;
  	text-indent: -1.3em;
}
#contents .link_banner{
	background: #b8fff4;
	margin: 0px;
	/*background-size:cover;*/
	/* height: 300px; */
	vertical-align: bottom;
}
#contents .-col2{
    max-width: 676px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5% 5% 0;
}
#contents .-col2 .col-in{
	width: calc((100% - 3%) / 2);
	max-height: 350px;
	/* text-align: center; */
}
#contents .col-in img{
	max-width: 295px;
	/*height: 120px;*/
	object-fit: contain;
}
#contents .-col2 .col-in:last-child{
	text-align: center;
}	
#contents .-col2 .col-in h2{
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5;
}
#contents .boxlink{
	display: block;
	position:relative;
	margin-top: 10px;
	box-sizing: border-box;
	text-align: center;
	width: 80%;
	border: solid #313131 1px;
	padding: 10px;
	color: #313131;
	text-decoration: none;
	/*background: #f0f0f0;*/
}

#contents .boxlink :visited{
	color: #313131;
	
}
#contents .boxlink span::before{
	position: absolute;
	content: '';
	width: 9px;
	height: 9px;
	border: 0px;
	border-top: solid 1px #313131;
	border-right: 1px solid #313131;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: calc(50% - 5px);
	right: 10%;
	transition: all 300ms 0s ease;
}
#contents .boxlink span::after{
	position: absolute;
	content: '';
	width: 30px;
	height: 1px;
	border: 0px;
	border-top: solid 1px #313131;
	top: calc(58% - 4px);
	right: 10%;
	transition: all 300ms 0s ease;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px){

/*=============================================================
materiality contents Layout
=============================================================*/
#contents .-col2{
	padding: 7%;
	}
#contents .-col2 .col-in{
	width: 100%;
}
#contents .-col2 .col-in h2{
	font-size: 90%;
}
#contents .boxlink{
	margin: 3% 0 2%;
	font-size: 75%;
	width: 65%;	
	}		
#contents .boxlink span::before{
	position: absolute;
	content: '';
	width: 5px;
	height: 5px;
	border: 0px;
	border-top: solid 1px #313131;
	border-right: 1px solid #313131;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: calc(52% - 5px);
	right: 5%;
	transition: all 300ms 0s ease;
}
#contents .boxlink span::after{
	position: absolute;
	content: '';
	width: 15px;
	height: 1px;
	border: 0px;
	border-top: solid 1px #313131;
	top: calc(56% - 4px);
	right: 5%;
	transition: all 300ms 0s ease;
}
#contents .col-in img{
	max-width: 767px;
	width: 100%;
	}
#contents h5.gray{
	width: 100%;
	}
#contents figure.left{
	width: 100%;
	}
}