@charset "UTF-8";


/*
	##### DAIFUKU REPORT 2018 #####
	common/css/value_sp.css
*/



.indicatorBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1.25%;
	margin: 2em 3%;
	width: auto;
	font-size: 2.2vw;
	line-height: 0;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.4)
}
.indicatorBox li {
	display: inline-block;
	padding: 1em 0.5em;
	margin: 0;
	color: #fff;
	background-color: #C7C9E5;
	border-radius: 3px
}

.indicatorBox li.current {
	font-weight: 500;
	background-color: #004099;
}


/* pageTitle */

.pageTitle .label {
	display: inline-block;
	height: 5.6vw;
	margin-top: 1em;
	padding: 0 0.5em;
	border-radius: 4px;
	font-size: 62%;
	line-height: 5.6vw;
	font-weight: normal;
	vertical-align: top;
	box-shadow: 0 0 5px rgba(0,0,0,0.4)
}
.pageTitle .date {
	font-size: 50%;
	font-weight: 400;
}


/*
governance_sp.cssと同じ*/
.pageTitle + p {
	padding: 0 2.5%;
	font-size: 4.0625vw;
	line-height: 1.78;
/*	text-align: justify;*/
}



/*lead*/
.sections .lead {
	margin-top: 1em;
	font-size: 4.375vw;
	line-height: 1.5;
	font-weight: 700;
	text-align: left;
}

/*=====================================================
value_model
=====================================================*/

.v_model .scrollFig {
	padding-bottom: 3em
}

/*750+xx=xxx */
#mapArea {
	width: calc(750px + (750px - 100vw));
	height: 425px;
	margin-left: calc(-750px + 100vw);
}

/*750-vw=xx*/
.flowMap {
	width: 750px;
	height: 425px;
	left: calc(750px - 100vw);
}
#scrllFig #map {
	width: 750px;
	height: 425px;
}
.v_model .scrollFig .links,
.v_model .scrollFig .biz {
	display: none;
}

/*=====================================================
value_chain
=====================================================*/

.value_chain {
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
	margin-bottom: -30vw;
	position: relative;
	padding: 0;
	background: url(../png/value_chain_bg.png) no-repeat center center / 75% auto;
}
.value_chain h2 {
	width: 50%;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.value_chain h2 img {
	width: 100%;
	height: auto;
}

.value_chain .cols {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.value_chain .col {
	box-sizing: border-box;
	width: 100%;
	min-height: 181vw;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.value_chain .col1,
.value_chain .col2 {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.value_chain .needs {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 48%;
	padding: 3%;
	background-color: rgba(255, 255, 255, .8);
	border: 2px solid;
}
.value_chain .col1 .needs {
	padding-bottom: 30px;
}
.value_chain .col2 .needs {
	padding-top: 35px;
}
.value_chain .col:nth-child(2) {
	margin-top: 24vw;
}
.value_chain .col1 .needs:nth-child(2) {
	border-image: linear-gradient(-90deg, rgba(251, 240, 118, 1) 0%, rgba(246, 233, 114, 1) 6.69%, rgba(215, 192, 91, 1) 47.89%, rgba(197, 166, 76, 1) 80.4%, rgba(190, 157, 71, 1) 100%) 2;
}
.value_chain .col1 .needs:nth-child(1) {
	border-image: linear-gradient(90deg, rgba(160, 216, 239, 1) 0%, rgba(134, 179, 221, 1) 42.21%, rgba(117, 155, 208, 1) 78.03%, rgba(111, 146, 204, 1) 100%) 2;
}
.value_chain .col2 .needs:nth-child(1) {
	order: 2;
	border-image: linear-gradient(90deg, rgba(120, 150, 46, 1) 0%, rgba(215, 231, 175, 1) 100%) 2;
}
.value_chain .col2 .needs:nth-child(2) {
	order: 1;
	border-image: linear-gradient(-90deg, rgba(239, 133, 140, 1) 0%, rgba(250, 219, 218, 1) 100%) 2;
}
.value_chain .needs h3 {
	position: relative;
	font-size: 4.0625vw;
	font-weight: bold;
	line-height: 1.2
}

.value_chain .needs h3::before {
	left: 0;
	content: '';
	display: block;
	width: 7vw;
	height: 4vw;
}
.value_chain .col1 .needs:nth-child(1) h3::before {
	background: url(../svg/v_arrw-b.svg) no-repeat left top / contain;
	vertical-align: middle
}
.value_chain .col1 .needs:nth-child(2) h3::before {
	background: url(../svg/v_arrw-y.svg) no-repeat left top / contain;
	vertical-align: middle
}
.value_chain .col2 .needs:nth-child(1) h3::before {
	background: url(../svg/v_arrw-g.svg) no-repeat left top / contain;
	vertical-align: middle
}
.value_chain .col2 .needs:nth-child(2) h3::before {
	background: url(../svg/v_arrw-r.svg) no-repeat left top / contain;
	vertical-align: middle
}

.value_chain .needs .txt {
	width: 100%;
	padding-bottom: 1em;
	color: #003f98;
}
.value_chain .needs .ph {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.value_chain .needs p {
	font-size: 2.8vw;
	line-height: 1.5;
	padding-top: 1em;
	text-align: left;
}
.value_chain .result {
	margin-top: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.value_chain .result dt {
	display: inline-block;
	padding: .5em .75em;
	font-size: 3.0625vw;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	background: #003f98;
	color: #fff;
}

.value_chain .result dd {
	font-size: 6.875vw;
	font-weight: bold;
	color:  #003f98
}
.value_chain .result .unit {
	font-weight: 500;
	font-size: 80%
}

/*=====================================================
strategies
=====================================================*/
.strategies_chrt {
	width:98%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	position: relative;
	padding: 0;
	background: url(../png/img_strategies_bg.png) no-repeat center center / 80% auto;
}
.strategies_chrt h2 {
	width: 50%;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.strategies_chrt h2 img {
	width: 100%;
	height: auto;
}
.strategies_chrt .cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.strategies_chrt .col {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 49%;
	min-height: 107vw;
	padding: 3%;
	background-color: rgba(174, 221, 240, .7);
}
.strategies_chrt .col:nth-child(1),
.strategies_chrt .col:nth-child(2) {
	padding: 35px 3% 24%;
}
.strategies_chrt .col:nth-child(3),
.strategies_chrt .col:nth-child(4) {
	margin-top: 40px;
	padding-top: 21%;
}
.strategies_chrt .col:nth-child(2n) {
	align-items: flex-end;
}
.strategies_chrt .col img {
	width: 100%;
	height: auto;
}
.strategies_chrt .col .text {
	width: 100%;
	padding-bottom: 1em;
	color: #003f98;
}
.strategies_chrt .col .label {
	font-size: 2.8vw;
	font-weight: bold;
	color: #000;
	display: block;
	padding-bottom: 0.5em;
}
.strategies_chrt .col h3 {
	font-size: 4.0625vw;
	font-weight: bold;
}
.strategies_chrt .col p {
	font-size: 2.8vw;
	line-height: 1.5;
	padding-top: 1em;
}

.strategies_chrt .chrt {
	width: 100%;
}




/*=====================================================
societies
=====================================================*/
.societies_chrt {
	background-color: #6c9bd2;
	padding-bottom: 5vw;
	margin-top: 1.5em;
	width:100%;
}
.societies_chrt h2 {
	text-align: center;
	font-size: 5.625vw;
	font-weight: bold;
	letter-spacing: 0.02em;
	color: #fff;
	padding: 0 0.5em;
}

.societies_chrt .chrt01 {
	background-color: #6c9bd2;
	text-align: center;
	padding: 1vw 0 0;
}
.societies_chrt .chrt01 ul {
	background-color: #4171B9;
	width:100%;
	margin-top: 2vw;
	box-sizing: border-box;
	padding: 5vw 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.societies_chrt .chrt01 li {
	width:46%;
	padding: 1.5em 0;
	min-height: 8em;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	font-size: 4.25vw;
	font-weight: bold;
	color: #004098;
	margin: 2vw 0;
	box-sizing: border-box;
}

.societies_chrt .bg{
	width:98vw;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	padding:0px 0 5vw;
	border-bottom:#fff solid 2px;
	text-align: center;
}
.societies_chrt .bg:before,
.societies_chrt .bg:after {
	content: "";
	position: absolute;
    top: 100%;
	left: 50%;
	-webkit-transform: translateX(-50%); /* Safari用 */
	transform: translateX(-50%);
}
.societies_chrt .bg:before {
	border: 90px solid transparent;
	border-top: 30px solid #fff;
}
.societies_chrt .bg:after {
	border: 92px solid transparent;
	border-top: 30px solid #6c9bd2;
	margin-top: -3px;
}





.societies_chrt .chrt02 .bg{
	padding:0px;
}
.societies_chrt .chrt02 h2 {
	padding: 9vw 0.5em 0;
}
.societies_chrt .chrt02 ul {
	width:100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.societies_chrt .chrt02 li {
	width:45%;
	padding: .75em;
	margin: 3% 0;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	color: #004098;
	box-sizing: border-box;
}
.societies_chrt .chrt02 h3 {
	font-weight: bold;
	font-size: 4.0625vw;
	text-align: center;
	padding-bottom: 1em;
}
.societies_chrt .chrt02 p {
	font-size: 3.125vw;
	line-height: 1.5;
	text-align: left;
	hyphens: auto;
}


.societies_chrt .chrt03 h2 {
	padding: 9vw 0.5em 0;
}
.societies_chrt .chrt03 ul {
	width:92%;
	margin-left: auto;
	margin-right: auto;
	margin-top: .75em;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	padding: 4%;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}
.societies_chrt .chrt03 li {
	width:39%;
	height: auto;
	border-radius: 100%;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	margin: .75em;
}







/*=====================================================
accelerate
=====================================================*/
p+.sections {
margin-top: 2em;
}

.total_power_box {
	width:90vw;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	padding: 5vw;
}
.tpower_ttl {
	background-color: #004097;
	height: 6.875vw;
	font-size: 3.75vw;
	line-height: 6.875vw;
	text-align: center;
	color: #fff;
	font-weight: bold;
	position: relative;
}
.tpower_ttl:after {
	content: "";
	position:absolute;
	top:0;
	right: 0;
	width:0;
	height: 0;
	border-bottom: 7vw solid #fff;
	border-left: 7vw solid #004097;
	z-index: 2;
}
.tpower_ttl2 {
	font-size: 5vw;
	color: #004097;
	font-weight: bold;
	text-align: center;
	margin-top: 4.6875vw;
}
.total_power_chrt {
	display: block;
	margin-top: 4.6875vw;
}
.total_power_chrt .desc {
	color: #004097;
	font-size: 3.4375vw;
	line-height: 1.75;
	margin-top: 1em;
}
.total_power_chrt ul.img {
	display: flex;
}
.total_power_chrt ul.img li+li {
	margin-left: 7vw;
}
.total_power_flow {
	display: block;
	margin-top: 4.6875vw;
}
.total_power_flow .img {
	margin-top: 4.6875vw;
}
.total_power_flow .desc {
	margin-top: 2em;
	color: #004097;
	font-size: 3.4375vw;
	line-height: 1.75;
	margin-top: 1em;
}


/*=====================================================
indicators
=====================================================*/

.key-perf {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.key-perf section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 30px;
}

.key-perf h1 {
	display: block;
	width: 95%;
	padding: 0.5em 0;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	background: #3B8DDE;
}
.key-perf p {
	display: inline-block;
	width: 88%;
	margin: 1em auto;
	font-size: 16px;
	line-height: 1.4;
	color: #004099;
	hyphens: auto;
}
.key-perf .des,
.key-perf dl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.key-perf .des {
	height: 100%;
}
.key-perf dl dt, 
.key-perf dl dd:first-of-type {
	text-align: center;
}

.key-perf dl dt {
	display: inline-block;
	min-width: 70px;
	margin-top: 1.5em;
	padding-top: 60px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #004099;
}

.key-perf dl dd:first-of-type {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #004099;
}
.key-perf dl dd:last-of-type {
	font-size: 15px;
	padding: 1em 1.5em 2em;
	hyphens: auto;
}
.key-perf dl dd .unit {
	font-size: 40%;
}
.key-perf dl dd .unit2 {
	font-size: 70%;
}
.key-perf dl dd .unit.block {
	display: block;
}
.key-perf dl dd .pal {
	display: block;
	margin-top: .5em;
	font-weight: 400;
	font-size: 25%;
}
.key-perf .fin-cap dl:nth-of-type(1) dt {
	background: url(../svg/ico01.svg) no-repeat center top / 100% auto
}
.key-perf .fin-cap dl:nth-of-type(2) dt {
	background: url(../svg/ico02.svg) no-repeat center top / 45% auto
}
.key-perf .fin-cap dl:nth-of-type(3) dt {
	width: 6em;
	background: url(../svg/ico03.svg) no-repeat center top / 100% auto
}
.key-perf .manuf-cap dl:nth-of-type(1) dt {
	padding-top: 70px;
	background: url(../svg/ico04.svg) no-repeat center top / 60% auto
}
.key-perf .manuf-cap dl:nth-of-type(2) dt {
	padding-top: 80px;
	background: url(../svg/ico05.svg) no-repeat center top / 47% auto
}
.key-perf .human-cap dl:nth-of-type(1) dt {
	padding-top: 70px;
	background: url(../svg/ico06.svg) no-repeat center top / 59% auto
}
.key-perf .human-cap dl:nth-of-type(2) dt {
	background: url(../svg/ico07.svg) no-repeat center top / 45% auto
}
.key-perf .human-cap dl:nth-of-type(3) dt {
	padding-top: 70px;
	background: url(../svg/ico08.svg) no-repeat center top / 30% auto
}
.key-perf .intel-cap dl:nth-of-type(1) dt {
	padding-top: 90px;
	background: url(../svg/ico09.svg) no-repeat center top / 53% auto
}
.key-perf .intel-cap dl:nth-of-type(2) dt {
	padding-top: 85px;
	background: url(../svg/ico10.svg) no-repeat center top / 75% auto
}
.key-perf .social-cap dl:nth-of-type(1) dt {
	padding-top:  85px;
	background: url(../svg/ico11.svg) no-repeat center top / 42% auto
}
.key-perf .social-cap dl:nth-of-type(2) dt {
	padding-top: 80px;
	background: url(../svg/ico12.svg) no-repeat center top / 48% auto
}
.key-perf .social-cap dl:nth-of-type(3) dt {
	padding-top: 70px;
	background: url(../svg/ico13.svg) no-repeat center top / 38% auto
}
.key-perf .natu-cap dl:nth-of-type(1) dt {
	padding-top: 80px;
	background: url(../svg/ico14.svg) no-repeat center top / 57% auto
}
.key-perf .natu-cap dl:nth-of-type(2) dt {
	padding-top: 85px;
	background: url(../svg/ico15.svg) no-repeat center top / 33% auto
}


/*=====================================================
contribution
=====================================================*/


.csrBox {
	width:94%;
	margin: 3em auto;
	margin-right: auto;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	padding: 2em 1em
}
.csrBox .title1 {
	font-size: 5.3125vw;
	font-weight: 700;
	color: currentColor;
}
.csrBox .lead {
	font-size: 6.25vw;
	font-weight: 700;
	color: #003f98;
	text-align: center;
}
.csrBox .subTitle {
	text-align: center;
	line-height: 1.3;
	margin-top: .75em;
}
.csrBox .theme {
	position: relative;
	display: block;
	width: 100%;
	margin: 2em 0;
}
.csrBox .theme h3 {
	display: block;
	width: 70%;
	height: 70%;
	margin: 0 auto
}
.csrBox .theme ul {
	width: 100%;
}
.csrBox .theme ul li {
	margin-top: .57em;
	margin-left: 2em;
	font-size: 4.375vw;
	font-weight: bold;
	color: #003f98;
	list-style: disc;
}

.csrBox .policy_chart dl {
	margin-top: 1em
}
.csrBox .policy_chart dt {
	font-weight: bold;
}
.csrBox .policy_chart dd a {
	color: #003f98;
}


.sdgsTable {
	width: auto;
}
.sdgsTable thead th {
	padding: 0.45em 3em;
	font-size: 4.0625vw;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	background-color: #7480BD;
	white-space: nowrap;
}

.sdgsTable thead th + th {
	border-left: 1px solid #fff;
}
.sdgsTable tbody th,
.sdgsTable tbody td {
	font-size: 3.75vw;
	padding: 1.5em;
	vertical-align: middle;
	border-bottom: 1px solid #000;
}
.sdgsTable tbody th {
	font-size: 105%;
	text-align: left;
	min-width: 8em;
	color: #003f98;
}
.sdgsTable tbody td {
	border-left: 1px solid #000;
}
.sdgsTable .sdgs img {
	width: 12.5vw;
	height: auto;
}

.sdgs ul {
	display: flex;
	flex-wrap: wrap;
	width: 200px;
	justify-content: flex-start;
}
.sdgs ul li {
	width: 14vw;
	margin: 1vw 0;
}
.materiality {
	min-width: 20em;
}
.materiality li {
	font-weight: 500;
	padding-left: 1em;
	text-indent: -1em
}
.materiality li + li {
	margin-top: 1.5em;
}
.materiality li::before {
	content: '● ';
	font-size: 75%;
	vertical-align: top;
	line-height: 2;
	color: #003f98;
}