@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;
}


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


/* 02 トップメッセージ
---------------------------------------------------------------- */
.csr.topmessage #contents .contentsBlock {
transform: rotate(0.005deg);
-webkit-transform: rotate(0.005deg);
-ms-transform: rotate(0.005deg);
}

.csr.topmessage #contents .tm_block .tm_title2018 {
	position: absolute;
	left: 7%;
	top: 12%;
	color: #111111;
	/*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	/*font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-size: 35px;
	font-weight: 800;
	line-height: 1.5;
	/*text-shadow:1px 2px 3px #ffffff;*/
	text-shadow: 
    #ffffff 1px 1px 10px, #ffffff -1px 1px 10px,
    #ffffff 1px -1px 10px, #ffffff -1px -1px 10px;
}
.csr.topmessage #contents .tm_block .tm_txt2018 {
	position: absolute;
	left: 7%;
	top: 65%;
	color: #222222;
	font-weight: bold;
	/*text-shadow:1px 2px 3px #ffffff;*/
	text-shadow: 
    #ffffff 1px 1px 10px, #ffffff -1px 1px 10px,
    #ffffff 1px -1px 10px, #ffffff -1px -1px 10px;
}
.csr.topmessage #contents .tm_block .tm_txt2018 span{
	/*font-family: Ryumin Heavy KL !important;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;*/
	font-size: 28px;
}
.csr.topmessage #contents #greeting{transform: rotate(0.05deg);}

.csr.topmessage #contents #greeting h3{
	/*font-family: Ryumin Heavy KL !important;*/
}
.csr.topmessage #contents #greeting p{
	font-size: 110%;
	/*font-family: Ryumin Bold KL !important;*/
}

/* 03 コベルコ建機グループの経営と企業理念
---------------------------------------------------------------- */
.mission{}

#contentsMain .compArea {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
    flex-direction: column;
	border: 1px solid #003f76;
	padding: 1.5em;
	margin:-16px 30px 40px;
}
#contentsMain .compArea .compList01 ol {
	text-indent: 0em;
    margin-left: 1.2em;
    margin-bottom: 2.0em;
}
#contentsMain .compArea .compList02 ol  {
	text-indent: 0em;
    margin-left: 1.2em;
    margin-bottom: 0.0em;
}
#contentsMain .compArea .compList01 .compHead,
#contentsMain .compArea .compList02 .compHead {
	font-size: 16px;
	font-weight: bold;
}
#contentsMain .compArea .compList01 .compHead .headmaker,
#contentsMain .compArea .compList02 .compHead .headmaker {
	font-size: 29px;
	line-height: 0.1rem;
}
#contentsMain .contentsBlock.contentsPadding .mb20.insideMaker {
	text-indent: -0.6em;
    margin-left: -0.3em;
}
#contentsMain .contentsBlock.contentsPadding .mb20.insideMaker .headmaker {
	
}



/* 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:365px;
	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:397px;
	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;
}
.csr #contents.highlight .supportBox .suppportcategory strong{
	display: inline-block;
	background-color: #333f48;
	padding: 0 3px;
	margin: 0 6px 4px 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(../highlight/images/04/ico_01.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl:nth-child(2) dt {
	background: url(../highlight/images/04/ico_02.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl:nth-child(3) dt {
	background: url(../highlight/images/04/ico_03.jpg) no-repeat left center;
	background-size:46px;
}
.csr #contents.highlight .caseBox dl:nth-child(4) dt {
	background: url(../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.0;
}
	/* 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%;}

#contentsMain .contentsBlock.contentsPadding .data-box.clearfix {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width:100%;
  margin-top: 40px;
}
#contents .width400 {	width: 400px !important; height:100% !important}
#contents .width840 {	width: 840px !important;}

/* 07 ステークホルダーとの関わり
---------------------------------------------------------------- */


/* 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 p,
.csr #contents dl dd,
.csr #contents dl dt,
.csr #contents li{
	font-size:14.5px !important;
	line-height:1.7 !important;
}
.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_トップメッセージ
---------------------------------------------------------------- */
.csr.topmessage #contents .tm_block .tm_title2018 {
	top: 10%;
	font-size: 15px;
}
.csr.topmessage #contents .tm_block .tm_txt2018 {
	top: 62%;
	font-size: 10px !important;
	line-height:1.4;
}
.csr.topmessage #contents .tm_block .tm_txt2018 span {
	font-size: 14px;
}
.csr.topmessage #contents .topMessageContents h3 {
	  line-height: 1.5;
	  font-size: 115%;
	  margin-top: 30px;
}
.csr.topmessage #contents #greeting p{
	font-size: 89%;
	margin-bottom: 16px !important;
	/*font-family: Ryumin Bold KL !important;*/
}


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

#contentsMain .compArea {
	padding: 1.0em;
    margin: -16px 0 40px;
}
.contentsBlock.contentsPadding .mb20.insideMaker {
    text-indent: -0.6em !important;
    margin-left: 0.6em !important;
}



/* 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(../highlight/images/04/ico_01.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl:nth-child(2) dt {
	background: url(../highlight/images/04/ico_02.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl:nth-child(3) dt {
	background: url(../highlight/images/04/ico_03.png) no-repeat left center;
	background-size:contain;
}
.csr #contents.highlight .caseBox dl:nth-child(4) dt {
	background: url(../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%;
}
/*#contents .width400 {	width: 98px !important;}*/
#contents .width840 {	width: 98% !important;}



/* 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%;
	
}


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






}