@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

/* ================================================================ 
目次
-----
00 共通CSS
01 CSRメッセージ
02 トップメッセージ
03 コベルコ建機グループの経営と企業理念
04 特集
05 環境保全活動
06 社会?地域活動
07 ステークホルダーとの関わり
08 社会環境報告書
================================================================  */


/* 00 共通CSS
---------------------------------------------------------------- */
/* 汎用 */
.csr{}
.csr .smallHeading h1 span#subh1{
	font-size: 65%;
}
.csr #contents sub{
	vertical-align: bottom;
	font-size: 70%;
	padding-right: 2px;
}
.csr #contents img{
	width: 100%;
	height: 100%;
}
.csr #contents #catchCopy {	
	color: #333f48;
	margin: 0 0 40px 0;
}
.csr #contents #catchCopy h2 {
	font-size: 35px;	
	font-weight: 600;
	font-family: "Sawarabi Mincho", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 0.03em;
	transform: rotate(0.05deg);
	margin:0 0 10px 0;
}
.csr #contents #catchCopy h2 span {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}
.csr #contents #catchCopy p {}

.csr #contents .width65 {
	width: 65%;
}
.csr #contents .widthhalf {
	width: 48.5%;
	margin: 0;
	padding: 0;
}
.csr #contents .mauto {
	margin: auto;
}
.csr #contents a.csrLink{
	display: inline-block;
	position: relative;
	color: #00a7ac;
	background-color: #fff;
	border: 1px solid #00a7ac;
	min-width: 300px;
	padding: 16px 20px 16px 20px;
    margin-bottom: 15px;
	text-decoration:none;
	border-radius: 28px;
	transition: background-color .3s;
	text-align: center;
	box-sizing: border-box;
}
.csr #contents a.csrLink::after{
	content: "";
	position: absolute;
	right: 20px;
	top: 21px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 6px;
	border-color: transparent transparent transparent #00a7ac;
}
.csr #contents a.csrLink:hover{
	background-color: #dcf9f7;
}
.csr #contents a.csrLink:last-of-type{
    margin-bottom: 0;
}


/* 01 CSRメッセージ
---------------------------------------------------------------- */


/* 02 トップメッセージ
---------------------------------------------------------------- */


/* 03 コベルコ建機グループの経営と企業理念
---------------------------------------------------------------- */
.mission{}
.csr #contents .widthAuto {
	width: auto !important;
}

/* 04 特集
---------------------------------------------------------------- */

/* ===== カテゴリ内共通 ===== */
.csr #contents.highlight .profText {
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.02em;
	margin-bottom: 5px;
}
.csr #contents.highlight .profText span {
	display: block;
	font-size: 0.8em;
	font-weight: normal;
	margin: 5px 0 2px;
}

/* ===== カテゴリtop ===== */
.csr.highlight #contents #contentsMain .link2Block .linkBox{width: 431px;}
.csr.highlight #contents .backnumberBox {margin-top: 20px;}


/* ===== 震災から10年 ===== */
.csr #contents.highlight .actualBox{
	margin-bottom:30px;
}
.csr #contents.highlight .actualBox > p{
	display:inline-block;
	vertical-align:top;
	width:370px;
	margin:0 20px 0 0;
}
.csr #contents.highlight .actualBox > div{
	display:inline-block;
	width:450px;
	margin:0;
}

/* TALK SESSOION */
.csr #contents.highlight #talksessionBox {
	background-color:#eeeeee;
	padding:30px 0;
	margin-bottom:40px;
}
.csr #contents.highlight #talksessionBox h2 {
	width:400px;
	margin:0 auto 25px;
}

.csr #contents.highlight #talksessionBox .contentsBlock {
	margin-bottom:0;
}
.csr #contents.highlight #talksessionBox ul {
	width:820px;
	margin:0 auto;
}
.csr #contents.highlight #talksessionBox ul li {
	width:400px;
	display:inline-block;
	margin-right:20px;
}
.csr #contents.highlight #talksessionBox ul li:last-child {
	margin-right:0;
}
.csr #contents.highlight #talksessionBox ul li a{
	opacity: 1.0;
	transition: opacity .2s;
	position: relative;
	cursor: pointer;
}
.csr #contents.highlight #talksessionBox ul li a:hover{
	opacity: 0.7;
}



/* 仲間たちのサポート */
.csr #contents.highlight .supportBox {}
.csr #contents.highlight .supportBox .clearfix {
	border-bottom: 1px solid #e3e3e3;
	padding-bottom: 10px;
	margin-bottom: 30px;
}
.csr #contents.highlight .supportBox .clearfix:last-child{
	border-bottom: 0;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.csr #contents.highlight .supportBox .suppportcategory{
	color: #333f48;
	margin-bottom: 10px;
}
.csr #contents.highlight .supportBox .suppportcategory strong{
	display: inline-block;
	background-color: #333f48;
	padding: 0 3px;
	margin: 0 0 2px 0;
	color: #ffffff;
	letter-spacing: 0.1em;
}
.csr #contents.highlight .supportBox h4{
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 10px;
	color: #333f48;
}
.csr #contents.highlight .supportBox h4::after{
	content: "";
	width: 50px;
	height: 1px;
	margin-top: 10px;
	display: block;
	background-color: #333f48;
}


/* ===== ワークスタイル変革 ===== */
.csr #contents.highlight {}
.csr #contents.highlight .caseBox {}
.csr #contents.highlight .caseBox dl {
	display: block;
	width:49%;
	float: left;
	margin: 0 2% 2% 0;
	background-color:#fef7f3;
	box-sizing: border-box;
	/*border: 1px solid #e3e3e3;*/
	padding: 20px;
}
.csr #contents.highlight .caseBox dl:nth-child(even) {
	margin: 0 0 2% 0;
}
.csr #contents.highlight .caseBox dl dt {
	color: #d7000f;
	font-size: 115%;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 12px 0 12px 55px;
}
.csr #contents.highlight .caseBox dl dt {
	margin-bottom: 10px;
}
.csr #contents.highlight .caseBox dl:nth-child(1) dt {
	background: url(/csr/highlight/images/04/ico_01.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl:nth-child(2) dt {
	background: url(/csr/highlight/images/04/ico_02.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl:nth-child(3) dt {
	background: url(/csr/highlight/images/04/ico_03.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl:nth-child(4) dt {
	background: url(/csr/highlight/images/04/ico_04.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl dd {
	font-size: 92%;
	line-height: 1.6;
}


/* 05 環境保全活動
---------------------------------------------------------------- */
.csr #contents.environment h3.textHeader span {
	font-size: 70%;
}

.csr #contents.environment .keyeproimgBox{}
.csr #contents.environment .keyeproimgBox img{
	display:block;
	margin-bottom:8px;
}
.csr #contents.environment .keyeproimgBox .floatLeft{
	width: 38%;
	margin: 0;
}
.csr #contents.environment .keyeproimgBox .floatRight{
	width: 57%;
	margin: 0;
}


/* ===== 生産 ===== */
.csr #contents.environment .processBox .processBoxInner{
	background-color:#e6f7f8;
	margin-bottom: 20px;
	box-sizing: border-box;
	padding: 20px 30px;
	position: relative;
}
.csr #contents.environment .processBox .processBoxInner:last-child{
	overflow: hidden;
}
.csr #contents.environment .processBox .processBoxInner:after{
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	z-index: 10;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 25px 0 25px;
	border-color: #e6f7f8 transparent transparent transparent;
}

.csr #contents.environment .processBox .clearfix .floatLeft,
.csr #contents.environment .processBox .clearfix .floatRight{
	margin: 0;
}
.csr #contents.environment .processBox div.floatLeft{
	display: table;
	width: 60%;
	height: 175px;
}
.csr #contents.environment .processBox div.floatLeft p{
	display: table-cell;
	vertical-align: middle;
}
.csr #contents.environment .processBox div.floatLeft p:first-child{
	width: 100px;
}
.csr #contents.environment .processBox div.floatLeft p:first-child img{
	height: auto;
}
.csr #contents.environment .processBox div.floatLeft p:nth-child(2){
	width: 350px;
	padding-left: 20px;
}
.csr #contents.environment .processBox div.floatLeft p strong{
	display: inline-block;
	background-color: #00a7ac;
	color: #ffffff;
	font-size: 115%;
	padding: 3px 5px;
	margin-bottom: 5px;
	line-height: 1.2;
}
	/* IE用ハック */
	_:-ms-lang(x), .csr #contents.environment .processBox div.floatLeft p strong {
		padding: 5px 5px 1px;
	}

.csr #contents.environment .processBox div.floatRight{
	width: 35%;
}


.csr #contents.environment .textBtn a {
	position: relative;
	display: block;
	border: #00adb0 1px solid;
	padding: 12px 0;
	text-align: center;
	color: #00adb0;
	text-decoration: none;
	border-radius: 26px;
}
.csr #contents.environment .textBtn a:after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	width: 0;
	height: 0;
	margin-top: -4px;
	border-width: 4px 0 4px 7px;
	border-style: solid;
	border-color: transparent transparent transparent #00adb0;
}
.csr #contents.environment .textBtn a:hover{
	color: #ffffff;
}
.csr #contents.environment .textBtn a:hover:after {
	border-color: transparent transparent transparent #fff;
}


/* 06 社会?地域活動
---------------------------------------------------------------- */
.humans_box .humans_box--man__discription dt {
    width: 50%;
    height: auto;
    margin-bottom: 10px !important;
}

.border_radius {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.dataList dd span{display:none;}
.dataListimg_PC_l{float:left; width:48%; text-align:center;}
.dataListimg_PC_r{float:right; width:48%; text-align:center;}
.dataListimg_PC_l span,
.dataListimg_PC_r span{font-size:90%;}
.dataListimg_PC_l img,
.dataListimg_PC_r img{ width:100%;}

.sociery #contents p.demae {
    padding: 20px 30px;
    border: #00a7ac solid 1px;
    box-sizing: border-box;
}



/* 07 ステークホルダーとの関わり
---------------------------------------------------------------- */
.stakeholder #contents .caseBox dl {
	display: block;
	width: 100%;
	margin: 0 0 15px 0;
	background-color:#fef7f3;
	box-sizing: border-box;
	padding: 25px 40px;
}
.stakeholder #contents .caseBox dl dt {
	color: #d7000f;
	font-size: 115%;
	font-weight: bold;
	padding: 0 0 0 60px;
}
.stakeholder #contents .caseBox dl dt {
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}
.stakeholder #contents .caseBox dl:nth-child(1) dt {
	background: url(/csr/stakeholder/images/ico_03.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(2) dt {
	background: url(/csr/stakeholder/images/ico_01.png) no-repeat left center;
	background-size:50px;
    line-height: 1.2;
}
.stakeholder #contents .caseBox dl:nth-child(3) dt {
	background: url(/csr/stakeholder/images/ico_02.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(4) dt {
	background: url(/csr/stakeholder/images/ico_04.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(5) dt {
	background: url(/csr/stakeholder/images/ico_05.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl dd {
	font-size: 92%;
	line-height: 1.6;
    margin-top: 10px;
}
.stakeholder #contents .caseBox dl:nth-child(2) dd img {
    width: 130px;
    float: right;
    height: auto;
    padding: 0 0 10px 30px;
}

/* 08 社会環境報告書
---------------------------------------------------------------- */



/* ================================================================ 
							スマートフォン
================================================================  */
@media screen and (max-width: 767px){

/* 00 SP_共通CSS
---------------------------------------------------------------- */
/* SP_汎用 */
.csr{}
.csr .smallHeading h1 span#subh1{
	font-size: 15px;
	display: block;
}

.csr #contents #catchCopy {margin: 0 0 30px 0;}
.csr #contents #catchCopy h2 {
	font-size: 28px;
	text-align: center;
}
.csr #contents #catchCopy h2 span {font-size: 15px;}
.csr #contents .width80,
.csr #contents .width75,
.csr #contents .width60{
	width:auto !important;
}
.csr #contents .widthSP75{
	width:75% !important;
	margin-left:auto !important;
	margin-right:auto !important;
}
.csr #contents .widthSP50{
	width:50% !important;
	margin-left:auto !important;
	margin-right:auto !important;
}
.csr #contents a.csrLink{
	min-width: 100%;
	font-size: 90%;
	padding: 14px 20px 14px 20px;
    margin-bottom: 10px;
}
.csr #contents a.csrLink::after{
	top: 20px;
} 



/* 汎用 */
.csr #contents p,
.csr #contents dl dd,
.csr #contents dl dt,
.csr #contents li{
	font-size:14.5px;
	line-height:1.7;
}
.csr #contents #contentsMain {
	padding-bottom:0;
}


/*.csr #contents sub{
	vertical-align: bottom;
	font-size: 70%;
	padding-right: 2px;
}
.csr #contents img{
	width: 100%;
	height: 100%;
}
.csr #contents #catchCopy p {}

.csr #contents .width65 {
	width: 65%;
}
.csr #contents .widthhalf {
	width: 48.5%;
	margin: 0;
	padding: 0;
}
.csr #contents .mauto {
	margin: auto;
}*/




/* 01 SP_CSRメッセージ
---------------------------------------------------------------- */
.message #contents .productsRead {
    font-size: 120%;
}
.message #contents .x-textLarge {
	font-size:110% !important;
}


/* 02 SP_トップメッセージ
---------------------------------------------------------------- */




/* 03 SP_コベルコ建機グループの経営と企業理念
---------------------------------------------------------------- */
/* ===== SP_企業理念 ===== */
.csr #contents #acMenu{
	width:90%;
	margin:0 auto;
}
.csr #contents #acMenu .contentsPadding {
	padding:0;
}


/* 04 SP_特集
---------------------------------------------------------------- */
/* ===== SP_カテゴリ内共通 ===== */
.csr #contents.highlight #contentsMain{
	padding:0 !important;
}
.csr #contents.highlight .profText {
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.02em;
	margin-bottom: 5px;
}
.csr #contents.highlight .profText span {
	display: block;
	font-size: 0.8em;
	font-weight: normal;
	margin: 5px 0 2px;
}

/* ===== SP_カテゴリtop ===== */
.csr.highlight #contents #contentsMain .link2Block .linkBox{
	width: calc(50% - 1px);
}
.csr.highlight #contents #contentsMain .link2Block .linkBox .linkText{
	font-size:90%;
}
.csr.highlight #contents #contentsMain .backnumberBox{
	width:90%;
	box-sizing:border-box;
	margin:10px auto 40px;
	font-size:90%;
}


/* ===== SP_震災から10年 ===== */
.csr #contents.highlight #catchCopy{
	width:90%;
	margin:0 auto 30px;
}
.csr #contents.highlight .actualBox{
	margin-bottom:30px;
}
.csr #contents.highlight .actualBox > p{
	display:block;
	width:100%;
	margin:0 0 20px 0;
}
.csr #contents.highlight .actualBox > div{
	display:block;
	width:100%;
}


/* SP_TALK SESSOION */
.csr #contents.highlight #talksessionBox {
	padding:20px 0;
}
.csr #contents.highlight #talksessionBox h2 {
	width:80%;
	margin:10px auto 20px;
}
.csr #contents.highlight #talksessionBox > p{
	width:90%;
	margin:0 auto 10px !important;
}
.csr #contents.highlight #talksessionBox ul {
	width:100%;
}
.csr #contents.highlight #talksessionBox ul li {
	width:100%;
	display:block;
	margin:0 0 10px 0;
}
.csr #contents.highlight #talksessionBox ul li:last-child {
	margin:0 0 10px 0;
}
.csr #contents.highlight #talksessionBox ul li a{
	opacity: 1.0;
	transition: opacity .2s;
	position: relative;
	cursor: pointer;
}
.csr #contents.highlight #talksessionBox ul li a:hover{
	opacity: 0.7;
}



/* SP_仲間たちのサポート */
/*.csr #contents.highlight .supportBox {}
.csr #contents.highlight .supportBox .clearfix {
	border-bottom: 1px solid #e3e3e3;
	padding-bottom: 10px;
	margin-bottom: 30px;
}
.csr #contents.highlight .supportBox .clearfix:last-child{
	border-bottom: 0;
	padding-bottom: 0px;
	margin-bottom: 0px;
}*/
.csr #contents.highlight .supportBox .suppportcategory{
	font-size: 80%;
	margin-bottom: 20px;
	/*color: #333f48;*/
}
.csr #contents.highlight .supportBox .suppportcategory strong{
	display: block;
	margin: 0 0 5px 0;
	font-size: 110%;
	/*background-color: #333f48;
	padding: 0 3px;
	color: #ffffff;
	letter-spacing: 0.1em;*/
}
.csr #contents.highlight .supportBox h4{
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 10px;
	color: #333f48;
}
.csr #contents.highlight .supportBox h4::after{
	content: "";
	width: 50px;
	height: 1px;
	margin-top: 10px;
	display: block;
	background-color: #333f48;
}





/* ===== SP_ワークスタイル変革 ===== */
.csr #contents.highlight {}
.csr #contents.highlight .caseBox {}
.csr #contents.highlight .caseBox dl {
	width:100%;
	float: none;
	margin: 0 0 10px 0;
	font-size: 90%;
	padding: 15px 20px;
}
.csr #contents.highlight .caseBox dl:nth-child(even) {
	margin: 0 0 10px 0;
}
.csr #contents.highlight .caseBox dl:last-child {margin: 0;}
.csr #contents.highlight .caseBox dl dt {
	font-size: 110%;
	padding: 8px 0 8px 46px;
}
.csr #contents.highlight .caseBox dl:nth-child(1) dt {
	background: url(/csr/highlight/images/04/ico_01.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl:nth-child(2) dt {
	background: url(/csr/highlight/images/04/ico_02.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl:nth-child(3) dt {
	background: url(/csr/highlight/images/04/ico_03.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl:nth-child(4) dt {
	background: url(/csr/highlight/images/04/ico_04.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl dd {
	font-size: 100%;
}




/* 05 SP_環境保全活動
---------------------------------------------------------------- */
.csr #contents.environment #contentsMain{
	padding:0;
}

/* ===== SP_生産 ===== */
.csr #contents.environment .processBox .processBoxInner{
	padding: 20px;
}
.csr #contents.environment .processBox .processBoxInner:after{
	left: 43%;
}
.csr #contents.environment .processBox div.floatLeft{
	width: 100%;
	height: auto;
	margin-bottom: 10px !important;
}
.csr #contents.environment .processBox div.floatLeft p:first-child{
	width: 25%;
}
.csr #contents.environment .processBox div.floatLeft p:nth-child(2){
	width: 69%;
	padding-left: 5%;
	line-height:1.4;
}
.csr #contents.environment .processBox div.floatLeft p strong{
	font-size: 100%;
	line-height:1.2;
}
.csr #contents.environment .textBtn {
	width: 100%;
}



/* 06 SP_社会?地域活動
---------------------------------------------------------------- */
.dataList dd span{display:block; text-align:center;}
.dataList dd img{ width:80%; margin-top:5px;}
.dataListimg_PC_l,
.dataListimg_PC_r{display:none;}

.csr #contents.sociery .productsRead{
	font-size:120%;
	
}
.csr #contents.sociery .productsRead .readColor{
	display:block;
	font-size:90%;
	line-height:1.4 !important;
}


/* 07 SP_ステークホルダーとの関わり
---------------------------------------------------------------- */
.stakeholder #contents #contentsMain{
	padding:0 !important;
}

.stakeholder #contents .productsRead{
	font-size:120%;
	
}
.stakeholder #contents #contentsMain{
	padding:0 !important;
}

.stakeholder #contents .productsRead{
	font-size:120%;
	
}

.stakeholder #contents .caseBox dl {
	width:100%;
	float: none;
	margin: 0 0 10px 0;
	font-size: 90%;
	padding: 15px 20px;
}
.stakeholder #contents .caseBox dl:nth-child(even) {
	margin: 0 0 10px 0;
}
.stakeholder #contents .caseBox dl:last-child {margin: 0;}
.stakeholder #contents .caseBox dl dt {
	font-size: 110%;
	padding: 5px 0 5px 65px;
}
.stakeholder #contents .caseBox dl:nth-child(1) dt {
	background: url(/csr/stakeholder/images/ico_01.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(2) dt {
	background: url(/csr/stakeholder/images/ico_02.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(3) dt {
	background: url(/csr/stakeholder/images/ico_03.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(4) dt {
	background: url(/csr/stakeholder/images/ico_04.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl:nth-child(5) dt {
	background: url(/csr/stakeholder/images/ico_05.png) no-repeat left center;
	background-size:50px;
}
.stakeholder #contents .caseBox dl dd {
	font-size: 100%;
}  

/* 08 SP_社会環境報告書
---------------------------------------------------------------- */



}


@media screen and (max-width: 340px){


.csr.topmessage #contents .tm_block .tm_title2018 {
	top: 2%;
	width: 55%;
	font-size: 13px;
}

}