@charset "utf-8";
.visualHeader.sustainabilityManagementIndex{background-image:url("/sustainability/management/images/mainVisual.jpg");}
.visualHeader.environmentClimateChange{background-image:url("/sustainability/environment/climate_change/images/mainVisual.jpg");}
.materialityChart{font-size:14px;}
.materialityChart .item{border-bottom:1px #ddd dashed; padding:20px 0; display:flex; justify-content:space-between;}
.materialityChart header{color:#fff; text-align:center; font-weight:bold; padding:10px; font-size:16px;}
.materialityChart .item:not(:first-child) header{display:none;}
.materialityChart .content{width:70%;}
.materialityChart .content header{background:#54BEE4;}
.materialityChart .content .ttl{color:#368DDD; font-weight:bold; font-size:22px; padding:15px 0; display:flex; justify-content:flex-start; align-items:center;}
.materialityChart .content .ttl img{width:50px; height:auto; margin-right:10px;}
.materialityChart .content p{padding-right:10px; margin:0;}
.materialityChart .goals{width:30%;}
.materialityChart .goals header{background:#4ECD80;}
.materialityChart .goals ul{display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:center; margin:0; padding:10px 7px;}
.materialityChart .goals li{list-style:none; padding:2px; width:33.333%;}
.materialityChart .goals img{width:100%; height:auto; display:block;}

table.materialityRiskOpp{border:0 none; font-size:14px;}
table.materialityRiskOpp th{border:0 none; padding:8px;}
table.materialityRiskOpp td{border:0 none; padding:8px;}

table.materialityRiskOpp thead th{color:#fff; text-align:center; font-size:16px;}
table.materialityRiskOpp thead th.needs{background:#1157D4;}
table.materialityRiskOpp thead th.risk{background:#54BEE4}
table.materialityRiskOpp thead th.mat{background:#4ECD80;}
table.materialityRiskOpp thead .line th{background:transparent; color:#1157D4; border-bottom:1px #ddd solid;}
table.materialityRiskOpp tbody td{border-bottom:1px #ddd solid;}
table.materialityRiskOpp tbody td b{color:#368DDD; font-size:14px; margin-bottom:10px; display:block;}
table.materialityRiskOpp tbody td ul{margin-top:0;}
table.materialityRiskOpp tbody td ul li{font-size:14px;}
table.materialityRiskOpp tbody td.mat{border-bottom:0; text-align:center; background:#DAE4ED; font-size:12px; color:#368DDD;}
table.materialityRiskOpp tbody td.mat a{display:block; text-decoration:none; color:#368DDD;}
table.materialityRiskOpp tbody td.mat a:hover{opacity:.6;}
table.materialityRiskOpp td img{width:40px; height:auto; display:block; margin:0 auto;}

table.esgData th,
table.esgData td{padding:10px;}
table.esgData tr.midHeader th,
table.esgData tr.midHeader td{padding:5px 10px; background:#eee;}
table.esgData td.highlight{background:#eee;}
table.esgData tfoot td{background:#D7EAF1;}

.pageBody table.sustainability th,
.pageBody table.dataTable.sustainability thead th{background:#DAE4ED;}
.pageBody table.sustainability td ul li:last-child{margin-bottom:0;}
.pageBody h3 img.icn{vertical-align:middle; margin-right:5px; width:40px; height:40px; position:relative; top:-0.15em;}

.pageBody .sustColumn{border:1px #1f92c9 solid; padding:30px;}
.pageBody .sustColumn p:last-child{margin-bottom:0;}

.pageBody dl.materialityProcess{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; border-top:0; margin-top:0;}
.pageBody dl.materialityProcess dt{width:280px; padding:20px; border:2px #ed1c24 solid; border-bottom:0; text-align:center; font-weight:bold; position:relative; margin-top:5px;}
.pageBody dl.materialityProcess dt::before,
.pageBody dl.materialityProcess dt::after{width:140px; height:2px; background:#ed1c24; display:block; content:''; position:absolute; bottom:-8px;}
.pageBody dl.materialityProcess dt::before{transform:rotate(7deg); left:0;}
.pageBody dl.materialityProcess dt::after{transform:rotate(-7deg); right:0;}
.pageBody dl.materialityProcess dt:last-of-type{border-bottom:2px #ed1c24 solid;}
.pageBody dl.materialityProcess dt:last-of-type::before,
.pageBody dl.materialityProcess dt:last-of-type::after{content:none;}
.pageBody dl.materialityProcess dd{width:calc(100% - 320px); padding:40px 0; border-top:1px #ccc solid; border-bottom:0; margin-bottom:0;}
.pageBody dl.materialityProcess dd:last-child{border-bottom:1px #ccc solid;}
.pageBody ul.sdgsList{display:flex; justify-content:center; flex-wrap:wrap; margin-left:0;}
.pageBody ul.sdgsList li{margin:10px; width:calc((100% - 100px) / 5); list-style:none;}
.pageBody ul.sdgsList li img{display:block; width:100%; height:auto;}
.pageBody h3.contributionToSDGs{text-align:center; position:relative;}
.pageBody h3.contributionToSDGs::before{content:''; width:0; height:0; border-style: solid; border-width: 40px 125px 0 125px; border-color: #cccccc transparent transparent transparent; position:absolute; left:calc(50% - 125px); top:-45px;}

@media screen and (max-width: 767px){
	.materialityChart .item{padding:20px 0 0; display:block;}
	.materialityChart .item:not(:first-child) header{display:block;}
	.materialityChart .content{width:auto; padding-bottom:20px;}
	.materialityChart .content .ttl{justify-content:center;}
	.materialityChart .content .ttl img{width:40px; height:auto; margin-right:10px;}
	.materialityChart .content p{padding-right:10px; margin-bottom:0;}
	.materialityChart .goals{width:auto;}
	.materialityChart .goals ul{padding:10px 5px;}
	.materialityChart .goals li{width:calc(100% / 6);}
	.pageBody h3 img.icn{width:30px; height:30px; top:-0.05em;}
  .pageBody dl.materialityProcess{display:block;}
  .pageBody dl.materialityProcess dt{width:100%; padding:15px 15px 5px; margin-top:0; margin-bottom:0; font-size:18px;}
  .pageBody dl.materialityProcess dt::before,
  .pageBody dl.materialityProcess dt::after{content:none;}
  .pageBody dl.materialityProcess dd{width:100%; padding:0 15px 15px; border:2px #ed1c24 solid; border-top:0; margin-bottom:40px; position:relative;}
  .pageBody dl.materialityProcess dd::after {content:'▼'; position:absolute; bottom:-40px; left:calc(50% - 10px); font-size:20px; color:#ed1c24;}
  .pageBody dl.materialityProcess dt:last-of-type{border-bottom:0;}
  .pageBody dl.materialityProcess dd:last-of-type{border-bottom:2px #ed1c24 solid;}
  .pageBody dl.materialityProcess dd:last-of-type::before,
  .pageBody dl.materialityProcess dd:last-of-type::after{content:none;}
  .pageBody table.sustainability th,
  .pageBody table.sustainability td,
  .pageBody table.sustainability td ul li{font-size:14px;}
}