@charset "utf-8";

/* CSS Document */

/* Reset */
ul,ol { list-style: none; }
img {border: 0;margin: 0;padding: 0}
* { margin:0; padding:0; border:0; }
html {margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

th,td {
	line-height: 1;
}

body{
	text-align:left;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	margin:0px;
	padding:0px;
	color:#000;
	font-size:16px;
	line-height:1.4;
}


a img {border:none;}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

p {margin: 6px 0;}
.clearboth { padding: 0; clear:both; }

.t12{font-size: 12px;}
.t18{font-size: 18px;}
.t21{font-size: 21px;}
.t30{font-size: 30px;}

/*==========================================================*/

.wrap-hidden{
	overflow: hidden;
}

.container{
	margin:0 auto;
	max-width:1100px;
	padding: 0 20px;
}


@media screen and (min-width: 901px) {.sp{display:none;}}
@media screen and (max-width: 900px) {.pc{display:none;}}

p{
	text-align: justify;
	text-justify: inter-ideograph;
}

/*kobelco header==========================================================*/

.header{
	background-color: #fff;
	margin-bottom: 0;
}


/*index.html==========================================================*/

body#top::before {
	background-color: #fff;
	content:"";
	display:block;
	position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(https://www.kobelco.co.jp/materiality/img/top_bg-kids.jpg);
background-size:cover;

}


#top .top-title{
	font-size: 45px;
	text-align: center;
	line-height: 1.2;
	margin: 40px 0 30px 0;
}

#top .top-title .t1{font-size: 16px;}
#top .top-title .t2{font-size: 32px;}
#top .top-title .t3{font-size: 21px;}

#top-lead .lead-left{display: none;}
#top-lead .lead-center{float:left; width: calc(100% - 200px);font-size: 16px; line-height: 1.5;}
#top-lead .lead-right{float:right; width: 190px;}

#top-lead .lead-left img,
#top-lead .lead-right img {width: 180px;}

@media screen and (min-width: 901px) {
	#top .top-title .t1{font-size: 18px;}
	#top .top-title .t2{font-size: 45px;}
	#top .top-title .t3{font-size: 30px;}
	#top-lead .lead-left{display:block; float:left; width: 190px;}
	#top-lead .lead-center{float:left; width: calc(100% - 400px);font-size: 17px; line-height: 1.6;}
	#top .tit-exp-waku{width:55%;}
	#mate .tit-exp-waku{width:50%;}
}

#top .pentagon {
	max-width: 750px;
	max-height: 668px;
	width: 90%;
	height: calc(100vw - (100vw * 0.20));
	margin: 30px auto;
	background-image: url("https://www.kobelco.co.jp/materiality/img/top-btn-bg.png");
	background-size: 100% auto;
	background-position: center 35%;
	background-repeat: no-repeat;
	position: relative;
}

#top .pentagon img {
	max-width: 230px;
	width: 31%;
}

#top .pentagon .b1t {top: 0%; left: 36%; position: absolute; z-index:1;}
#top .pentagon .b2t {top: 25%; left: 3%; position: absolute; z-index:2;}
#top .pentagon .b3t {top: 25%; right: 1%; position: absolute; z-index:3;}
#top .pentagon .b4t {top: 64%; left: 15%; position: absolute; z-index:4;}
#top .pentagon .b5t {top: 64%; right: 15%; position: absolute; z-index:5;}



#top .to a {text-decoration: none; color: #000;}
#top .to a:hover {text-decoration: none; color: #999;}

#top .to .inner{margin: calc(-100vw * 0.15)  auto 0 auto; max-width: 600px; padding: 0 4%;}
#top .to .tit{font-size: 20px; text-align: center; line-height: 1.3;}
#top .to .txt {margin-top: 20px; font-size: 14px;}
#top .mark{width:30%; margin-left: 35%;}

#top .icon-sdgs{width:50px; float:left; margin: 10px 4px 0 0;}
#top .to-mate1 {border-top: 10px solid #20912b;}
#top .to-mate2 {border-top: 10px solid #ED5700;}
#top .to-mate3 {border-top: 10px solid #905D02;}
#top .to-mate4 {border-top: 10px solid #2291C1;}
#top .to-mate5 {border-top: 10px solid #A83584;}

#top .to{background-color: #fff; position: relative;}
.sp-bg{height: 200px;  background-position:center center; background-repeat: no-repeat; background-size: cover;}
.sp1{background-image: url("https://www.kobelco.co.jp/materiality/img/b1p-s.jpg");}
.sp2{background-image: url("https://www.kobelco.co.jp/materiality/img/b2p-s.jpg");}
.sp3{background-image: url("https://www.kobelco.co.jp/materiality/img/b3p-s.jpg");}
.sp4{background-image: url("https://www.kobelco.co.jp/materiality/img/b4p-s.jpg");}
.sp5{background-image: url("https://www.kobelco.co.jp/materiality/img/b5p-s.jpg");}

#top img.arrow2 {width:30px; margin: 32px 0 40px calc(50% - 15px);}

@media screen and (min-width: 901px) {
	#top .to{height: 340px;background-size: auto 340px;background-position: calc(100vw * 0.6) center; background-repeat: no-repeat;}
	#top .mark{width:200px; float: left; margin: 0;}
	#top .to-mate1 {border-top: 3px solid #20912b; background-image: url("https://www.kobelco.co.jp/materiality/img/b1p.png");}
	#top .to-mate2 {border-top: 3px solid #ED5700; background-image: url("https://www.kobelco.co.jp/materiality/img/b2p.png");}
	#top .to-mate3 {border-top: 3px solid #905D02; background-image: url("https://www.kobelco.co.jp/materiality/img/b3p.png");}
	#top .to-mate4 {border-top: 3px solid #2291C1; background-image: url("https://www.kobelco.co.jp/materiality/img/b4p.png");}
	#top .to-mate5 {border-top: 3px solid #A83584; background-image: url("https://www.kobelco.co.jp/materiality/img/b5p.png");}
	#top .arrow{max-width:10px; float: left; margin: 8px 4px;}
	#top .to .inner{margin: 32px 0 0 6%; max-width: none;}
	#top .to .tit{font-size: 28px; text-align: left;}
	#top .to .txt {overflow: hidden;}
}

#top .top-btn34{
	text-align: center;
	margin: -20px 0 20px 0;
}

#top .top-btn34 img{
	width: 220px;
	margin: 0 10px 10px 10px;
}


/*mate .html==========================================================*/

.navi-wrap {
	background: linear-gradient(to right, #C7C7C7, #F8F8F8);
	padding: 20px 0 50px 0;
}

.mate6 .navi-wrap {
	padding: 20px 0 20px 0;
}

.navi-wrap .navi-icon{
	float: left; 
	margin-right: 20px;
}

.navi-wrap .navi{
	float: left;
	width: calc(100% - 165px);
}

.navi-wrap .navi img {
	height: 68px; 
	margin: 0 10px 10px 10px;
}

.navi-wrap .navi-b6 img {
	height: 44px;
	margin: 0 10px 20px 20px;
}

.navi-wrap .navi-b7 img {
	margin: 0 10px 20px 0px;
}

.navi-wrap .container{
	max-width: 1200px;
	margin: 0 auto;
}

#mate-head {margin: calc(-100vw * 0.15)  auto 0 auto; max-width: 600px;}
#mate-head .mark{width:30%; margin-left: 35%;}
#mate-head .tit{font-size: 24px; text-align: center;}
#mate-head .txt {margin-top: 20px; font-size: 16px;}
#mate-head .icon-sdgs{width:70px; float:left; margin: 10px 4px 0 0;}
#mate-head .inner {padding: 0 20px;}
#mate .sp-bg{height: 230px;}

@media screen and (min-width: 901px) {
	#mate-head .mark{width:166px; float: left; margin: 0 20px 0 0;}
	#mate-head {margin: -50px 0 0 6%; max-width: none; min-height: 340px; background-size: auto 340px; background-position: calc(100vw * 0.5) center; background-repeat: no-repeat;}
	.mate1 #mate-head {background-image: url("https://www.kobelco.co.jp/materiality/img/b1p.png");}
	.mate2 #mate-head {background-image: url("https://www.kobelco.co.jp/materiality/img/b2p.png");}
	.mate3 #mate-head {background-image: url("https://www.kobelco.co.jp/materiality/img/b3p.png");}
	.mate4 #mate-head {background-image: url("https://www.kobelco.co.jp/materiality/img/b4p.png");}
	.mate5 #mate-head {background-image: url("https://www.kobelco.co.jp/materiality/img/b5p.png");}
	.mate5 #mate-head p {font-size: 16px;}
	#mate-head .tit{font-size: 31px; text-align: left;}
	#mate-head .txt {overflow: hidden; font-size: 18px; padding-top: 60px; line-height: 1.3;}
	.navi-wrap .selected {opacity: 0.5; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}
}

.title-line {font-size: 28px; padding: 10px 16px; margin: 60px auto 10px auto; line-height: 1.2;}
.mate1 .title-line {border-top: 1px solid #20912b; border-left: 6px solid #20912b; color: #20912b;}
.mate2 .title-line {border-top: 1px solid #ED5700; border-left: 6px solid #ED5700; color: #ED5700;}
.mate3 .title-line {border-top: 1px solid #905D02; border-left: 6px solid #905D02; color: #905D02;}
.mate4 .title-line {border-top: 1px solid #2291C1; border-left: 6px solid #2291C1; color: #2291C1;}
.mate5 .title-line {border-top: 1px solid #A83584; border-left: 6px solid #A83584; color: #A83584;}

.title-line2 {font-size: 22px; padding: 10px 16px; margin: 10px auto; line-height: 1.2; text-decoration: underline;}
.mate1 .title-line2 {color: #20912b;}
.mate2 .title-line2 {color: #ED5700;}
.mate3 .title-line2 {color: #905D02;}

#mate .cont {width: 90%; margin:0 auto; max-width:1100px; padding: 0 20px; font-size: 16px; margin-bottom: 50px;}
#mate .cont img {width: 100%; margin: 10px 0;}
#mate img.pdf-icon {width: 12px; height:12px; line-height: 1; margin: 0 0 0 4px;}

.midashi {
	padding-left:1em;
	text-indent:-1em;
	font-size: 18px;
	margin: 5px 0 5px 0;
}

.accent {font-size: 24px;}
.mate1 .accent {color: #20912b;}
.mate2 .accent {color: #ED5700;}
.mate3 .accent {color: #905D02;}
.mate4 .accent {color: #2291C1;}
.mate5 .accent {color: #A83584;}


.nav-bottom img {height: 70px;}
.nav-bottom {padding: 6px 5%;}
.nav-bottom-wrap .m1 {margin-top: 40px; border-top: 3px solid #108C2E;}
.nav-bottom-wrap .m2 {border-top: 3px solid #ED5700;}
.nav-bottom-wrap .m3 {border-top: 3px solid #905D02;}
.nav-bottom-wrap .m4 {border-top: 3px solid #2291C1;}
.nav-bottom-wrap .m5 {border-top: 3px solid #A83584;}
.nav-bottom-wrap .m6 {border-top: 1px solid #fff; background-color: #0172BA; font-size: 18px; height: 30px; text-align: center;}
.nav-bottom-wrap .m6 a{color: #fff; text-decoration: none;}
.nav-bottom-wrap .m6 a:hover {color: #88BDE0; text-decoration: none;}

#mate .gray-waku{
	display: table-cell;
	color: #fff;
	background-color: #7B7B7B;
	font-size: 16px;
	padding: 4px 8px;
	border-radius: 4px;
	line-height: 1;
}

#mate .midashi-wrap .icon-sdgs{width:80px; margin: 0 8px 0 0px;}
#mate .arrow3{height:40px; width: 114px; background-image: url("https://www.kobelco.co.jp/materiality/img/arrow4.png"); background-repeat: no-repeat; background-position: center center; background-size:100% 100%; margin: 30px 0; padding-top: 10px; color: #fff; font-size: 15px; line-height: 1.2; text-align: center; padding: 3px;}


ul.kanren{
	padding: 10px 0 0px 0;
}

ul.kanren2{
	padding: 0px 0 60px 0;
}

.kanren li {
	background: url("https://www.kobelco.co.jp/materiality/img/icon-kanren.png") left 0px top 3px no-repeat;
	background-size: 15px auto;
	text-align: left;
	padding: 0px 20px;
	font-size: 12px;
	margin-right: 20px;
}

sub{
	vertical-align: text-bottom;
	font-size: 12px;
}

@media screen and (min-width: 901px) {
	.title-line {font-size: 34px; max-width: 1100px; width: 90%;}
	.title-line2 {font-size: 28px; max-width: 1100px; width: 90%; }
	#mate .cont {font-size: 18px; margin-bottom: 50px;}
	.midashi {font-size: 20px;line-height: 1.3;}
	.per50 .midashi{font-size:18px;}
	#mate .cont .left{float: left; width:57%;}
	#mate .cont .right{float: right; width:39%;}
	#mate .cont .midashi-wrap .left{float: left; width:calc(100% - 270px);}
	#mate .cont .midashi-wrap .right{float: right; width:240px; text-align: right;}
	#mate .cont .width-cd1 .left{width:calc(100% - 370px);}
	#mate .cont .width-cd1 .right{width:340px;}
	#mate .gray-waku{font-size: 18px;}
	#mate .midashi-wrap .icon-sdgs{width:100px; margin: 0 0 0 8px;}
	#mate .left1 {width:35%;float: left;}
	#mate .left2 {width:25%;float: left; padding-top: 30px;}
	#mate .arrow3 {width: 125px; background-image: url("https://www.kobelco.co.jp/materiality/img/arrow3.png"); margin:0;}
	#mate .per50 {float: left; width:47%; padding-right: 2%;}
	.kanren li{ display:table-cell; padding: 3px 20px;}
}

.m1_p01{max-width: 714px;}
.m1_p02{max-width: 528px;}
.w350{max-width: 350px; padding-right: 50px;}
.w450{max-width: 450px;}
.w500{max-width: 500px;}
.w580{max-width: 580px;}
.w620{max-width: 620px;}
.m2_p02{font-size: 14px; padding: 10px 20px 0 0;}
.m2_p02 {max-width: 420px;}
.m4_p05{margin-bottom: 50px;}
.m5_p07{float: right; width: 90px;}

.m4_midashi{color: #2291C0; font-weight: bold; text-decoration: underline; padding: 10px 0 4px 0;}
.m4_midashi2{padding-left:1em;text-indent:-1em;font-size: 16px;margin: 0 0 5px 0; line-height: 1.2;}

.table-m5-1 {margin: 10px 10px 30px 10px;}
.table-m5-1 th {padding-right: 10px; font-weight: normal; vertical-align: top;}
.table-m5-1 td {padding: 0 0 10px 0;}

.topics{
	margin: 20px;
	padding: 30px;
	border: 2px solid #905D02;
}
.mate3 .topics{font-size: 16px;}
.mate3 .topics .title{
	color: #905D02;
	font-size: 28px;
}

.mate5 ol{
	list-style-type: decimal;
	margin: 6px 0;
	padding-left: 40px;
}

@media screen and (min-width: 901px) {
	.m2_p02{font-size: 15px; text-align: center;}
	.m4_p05{margin: 0 auto; width: 80%;}
}

.mate6 .mate6-tit-waku{
	background-color: #0172BA;
	color: #fff;
	font-size: 18px;
	padding: 24px 0;
	margin-bottom: 40px;
}

.mate6 .num{
	font-size: 60px;
	color: #0172BA;
	text-align: center;
	line-height: 1;
}

.mate6 .cont-r{
	
	font-size: 18px;
	margin-bottom: 50px;
}

.mate6 .num-tit{
	font-size: 28px;
	line-height: 1.2;
	margin-bottom: 12px;
}

.mate6 .list1{
	margin: 10px 10px 10px 30px ;
	list-style-type: disc;
}

.mate6 .cont-r img {width: 100%; margin: 10px 0;}

.mate6 img.m6_p3{max-width:700px;}

@media screen and (min-width: 901px) {
	.mate6 .cont-r span{display: inline-block;}
}

@media screen and (min-width: 701px) {
	.mate6 .num{float: left; width: 40px;}
	.mate6 .cont-r{float: right; width: calc(100% - 50px);}
}

/*21個のアイコン　technology==========================================================*/

#technology a{text-decoration: none; color: #555;}

#technology {
	background-color: #e6e6e6;
	padding: 40px 0;
	border-radius: 18px;
}

#technology .category + .category {
	margin-top: 40px;
}
#technology .category h3 {
	margin: 0 0 5px;
	padding: 0;
	font-size: 1.428em;
	font-weight: normal;
	line-height: 1;
	text-align: center;
}
#technology .category h3 span {
	display: inline-block;
	width: 182px;
	padding-bottom: 20px;
	border-bottom: 3px solid #666;
}
#technology .category.cat01 h3 span {color: #e73656; border-bottom-color: #e73656;}
#technology .category.cat02 h3 span {color: #8f5e3f; border-bottom-color: #8f5e3f;}
#technology .category.cat03 h3 span {color: #f7ab00; border-bottom-color: #f7ab00;}
#technology .category.cat04 h3 span {color: #b8589d; border-bottom-color: #b8589d;}


#technology .list ul {
	padding: 0;
	list-style: none;
	overflow: hidden;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#technology .list li {
	display: block;
	margin: 0 5px;
	padding: 0;
	float: left;
}

/*#technology .list li:nth-child(5n+1) {
	clear: left;
}
*/

#technology .list li figure {
	display: block;
	width: 154px;
	margin: 0;
	padding: 16px 16px 0;
}
#technology .list li figure span {
	display: block;
	width: 100%;
	height: 154px;
	background-color: #fff;
	border-radius: 100%;
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	transition-duration: 0.3s;
	transition-property: box-shadow, transform;
}
#technology .list li figure span:hover,
#technology .list li figure span:focus,
#technology .list li figure span:active {
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	transform: scale(1.1);
}
#technology .list li figure img {
	width: 100%;
	height: auto;
}
#technology .list li figure figcaption {
	display: block;
	margin: 0;
	padding: 10px 0 0;
	line-height: 1.285;
	text-align: center;
	font-size: 14px;
	height: 50px;
	
}
#technology .list li figure figcaption small {
	font-size: 12px;
}

@media screen and (max-width: 900px) {
	#technology .list li figure {width: 100px;}
	#technology .list li figure span {height: 100px;}
	#technology .list li figure figcaption {font-size: 11px;height: 40px;}
}