@charset "Shift_JIS";

/* **************************************************

Name: responsive.css

Description: Common Settings for Responsive Web Design

Create: 2015.07

Copyright 2015 Hitachi, Ltd. 

***************************************************** */



/* content===========================================

[-] for 995px -
[-] for - 994px
[-] for - 767px
[-] for - 579px
[-] for - 399px

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

/* ------ Arrow Box ------ */
.selectListStyleMain dd {overflow: hidden;}

/* ------ PC or SP ------ */
.spOnly994,.spOnly767,.spOnly579,.spOnly399{
	display: none;
}
.pcOnly994,.pcOnly767,.pcOnly579,.pcOnly399{
	display: block;
}

/* ------ Right Column Youtube ------ */
.sideYtArea{
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sideYtArea iframe{
	width: 200px;
}

/* ------ MainImage Divide ------ */
.txtDivide{
	background: #333333;
	padding: 10px;
	color: #ffffff;
}
.fsNormal{
	color: #ffffff;
	font-size: 90%;
}
.fsNormal .fsTitle{
	font-size: 120%;
	color: #ffffff;
}

.fsSmall{
	font-size: 80%;
}

/* ------ Table Scroll (with TextStyle1)------ */
.envTableSet .attention{
	display: none;
	margin-bottom: 0.25em;
	color: #c02;
}

/* ------ Top Page blockList ------ */
.oneBlockOver #TopPrArea{
	width: auto!important;
	border: none;
	margin: 0;
}
.oneBlockOver #TopPrArea img{
	width: 100%;
}
.oneBlockOver{
	width: 965px;
	overflow: hidden;
}
.oneBlockOver3set{
	width: 720px;
	overflow: hidden;
}
.topImageList{
	width: 980px;
}
.topImageList3set{
	width: 735px;
}
.commonImageList{
	width: 980px;
}
.doubleColList{
	width: 980px;
}
.commonImageList2col{
	width: 984px;
}
.topImageList li,.topImageList3set li{
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
}
.commonImageList li{
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
}
.doubleColList li{
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
}
.commonImageList2col li{
	margin-right: 19px;
	margin-bottom: 19px;
	float: left;
}

#TopBxSlider li{
	margin-right: 0px;
	margin-bottom: 0px;
}
.topImageSlide{
	width: 475px;
	overflow: hidden;
	background-color: #333333;
	position: relative;
}
.topImageSlide img{
	width: 100%;
	height: auto;
}

.topImageBox{
	width: 230px;
}
.topImageBox a{
	display: block;
	color: #ffffff;
	position: relative;
}
.topImageBox a img{
	height: auto;
	border: solid 1px #ffffff;
}
.topImageBox .topBoxNotes{
	padding: 10px 0 0 0;
}
.topImageBox2col{
	width: 473px;
	position: relative;
}
.topImageBox2col a{
	display: block;
	color: #ffffff;
}
.topImageBox2col a img{
	width: 100%!important;
	height: auto;
}

.topBoxText{
	width: 228px;
	display: table;
	position: absolute;
	left: 1px;
	bottom: 0px;
}
.topBoxText2col{
	width: 473px;
	display: table;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
/*
.textBg{
	display: table-cell;
	height: 44px;
	line-height: 120%;
	font-size: 90%;
	font-weight: bold;
	vertical-align: middle;
	background: transparent url("/environment/images/bg_thumblink02.png") no-repeat scroll right center;
	padding: 5px 20px 5px 10px;
	cursor: pointer;
}
.interviewtextBg{
	display: table-cell;
	height: 44px;
	line-height: 120%;
	font-size: 90%;
	font-weight: bold;
	vertical-align: middle;
	background: transparent url("/environment/images/bg_thumblink02.png") no-repeat scroll right center;
	padding: 5px 20px 5px 10px;
	cursor: pointer;
}
*/

.topImageBox a:hover .textBg,.topImageBox2col a:hover .textBg,.topImageBox a:hover .interviewtextBg{
	text-decoration: underline;
}

.mr0{
	margin-right: 0px!important;
}


.doubleImageBox{
	width: 475px;
}
.doubleInText{
	padding-top: 6%;
}

.doubleImageBox{
	width: 475px;
}
.doubleInText{
	padding-top: 6%;
}

.topImageBox2col .envTitleStyle a{
	display: inline;
}
.topImageBox2col .LinkListStyle1 a{
	color: #CC0022;
}
.topImageBox2col .LinkListStyle1 li{
	margin-right: 0px;
}
.topImageBox2col h2.envTitleStyle{
	padding: 2.9%;
}

.topImageBox a .ecoIconList01 img,.topImageBox a .ecoIconList02 img,.topImageBox a .ecoIconList03 img{
	width: 25px!important;
}

.newFlag{
	position: absolute;
	left: 1px;
	top: 1px;
}
.newFlag img{
	border: none!important;
}

/* for 995px -
=========================================================================================== */

@media screen and (min-width: 995px) {

}



/* for - 994px
=========================================================================================== */

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

/* ------ Link List ------ */
.ImgW60SetStyle .ImgSet p,
.ImgW60SetStyle .ImgSet ul,
.ImgW60SetStyle .ImgSet h3,
.ImgW60SetStyle .ImgSet table,
.ImgW60SetStyle .ImgSet div[class^="BoxPattern"],
.ImgW120SetStyle .ImgSet p,
.ImgW120SetStyle .ImgSet ul,
.ImgW120SetStyle .ImgSet h3,
.ImgW120SetStyle .ImgSet table,
.ImgW120SetStyle .ImgSet div[class^="BoxPattern"],
.ImgW180SetStyle .ImgSet p,
.ImgW180SetStyle .ImgSet ul,
.ImgW180SetStyle .ImgSet h3,
.ImgW180SetStyle .ImgSet table,
.ImgW180SetStyle .ImgSet div[class^="BoxPattern"],
.ImgW230SetStyle .ImgSet p,
.ImgW230SetStyle .ImgSet ul,
.ImgW230SetStyle .ImgSet h3,
.ImgW230SetStyle .ImgSet table,
.ImgW230SetStyle .ImgSet div[class^="BoxPattern"] {margin: 0 0 15px 0;}

/* ------ PC or SP ------ */
.spOnly994{
	display: block;
}
.pcOnly994{
	display: none;
}

/* ------ Right Column Youtube ------ */
.sideYtArea{
	position: relative;
	width: 80%;
	padding: 52% 0 0 0;
}
.sideYtArea iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ------ Top Page blockList ------ */
.oneBlockOver{
	width: 100%;
}
.oneBlockOver3set{
	width: 100%;
}

.topImageList,.topImageList3set,.commonImageList,.doubleColList,.commonImageList2col{
	width: 100%;
}

.topImageList li{
	margin-right: 1.5544%;
	margin-bottom: 1.5544%;
	float: left;
}
.topImageList3set li{
	margin-right: 1.5544%;
	margin-bottom: 1.5544%;
	float: left;
}
.commonImageList li{
	margin-right: 1.5544%;
	margin-bottom: 1.5544%;
	float: left;
}
.doubleColList li{
	margin-right: 1.5544%;
	margin-bottom: 1.5544%;
	float: left;
}
.commonImageList2col li{
	margin-right: 1.9689%;
	margin-bottom: 1.9689%;
	float: left;
}

.topImageSlide{
	width: 49.2228%;
}
.doubleImageBox{
	width: 49.2228%;
}

.topImageBox{
	width: 23.8342%;
	margin-right: 1.5544%;
	margin-bottom: 1.5544%;
}

.topImageBox2col{
	width: 49.0155%;
	margin-right: 1.9689%;
	margin-bottom: 1.9689%;
}

.topImageList > *:first-child + * + *,
.topImageList > *:first-child + * + * + * + *,
.topImageList > *:first-child + * + * + * + * + * + * + * + *,
.topImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + *{
	margin-right: 0;
}

.topImageList3set .topImageBox{
	width: 32.297%;
	margin-right: 1.5544%;
	margin-bottom: 1.5544%;
}
.topImageList3set > *:first-child + * + *,
.topImageList3set > *:first-child + * + * + * + * + *,
.topImageList3set > *:first-child + * + * + * + * + * + * + * + *,
.topImageList3set > *:first-child + * + * + * + * + * + * + * + * + * + * + *{
	margin-right: 0;
}

/* employee List */
.doubleColList > *:first-child + * + *,
.doubleColList > *:first-child + * + * + * + * + * + *,
.doubleColList > *:first-child + * + * + * + * + * + * + * + * + * + *{
	margin-right: 0;
}

.doubleInText{
	padding-top: 0;
}
.doubleInText p{
	line-height: 120%;
}


.commonImageList > *:first-child + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *{
	margin-right: 0;
}

.commonImageList2col > *:first-child + *,
.commonImageList2col > *:first-child + * + * + *,
.commonImageList2col > *:first-child + * + * + * + * + *,
.commonImageList2col > *:first-child + * + * + * + * + * + * + *{
	margin-right: 0;
}

.topImageBox a{
	display: block;
}
.topImageBox a img{
	width: 100%!important;
	height: auto;
}

.topBoxText,.topBoxText2col{
	width: 100%;
	height: auto;
}
.topImageBox a:hover .textBg{
	text-decoration: underline;
}

.lineMiddle{
	margin-right: 1.5544%!important;
}
.lineEnd{
	margin-right: 0%!important;
}
.topImageBox2col .topImageBox{
	width: 49.0155%;
}
}


/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
/* ------ Arrow Box List ------ */
	.JS .selectListStyleMain dd div .ImgRightAdjust {margin: 0 15px 10px 25px;}
	.JS .selectListStyleMain dd div .ImgRightAdjust p {margin: 0;}

/* ------ PC or SP ------ */
.spOnly767{
	display: block;
}
.pcOnly767{
	display: none;
}

/* ------ MainImage Divide ------ */
.spImgTitle{
	margin-bottom: 0px!important;
}

/* ------ SP Only Center Adjust ------ */
.spCenter{
	text-align: center!important;
	margin-left: auto!important;
	margin-auto: auto!important;
}
.pcLineBreak01{
	display: inline;
}


.doubleColList .topImageBox{
	width: 32.297%;
}

/* ------ Image Box 4col ------ */
.commonImageList .topImageBox{
	width: 32.297%;
}

.commonImageList > *:first-child + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *{
	margin-right: 1.5544%;
}
.commonImageList > *:first-child + * + *,
.commonImageList > *:first-child + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *,
.commonImageList > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *{
	margin-right: 0;
}



.doubleImageBox{
	width: 100%;
}
/* employee List */
.doubleColList > *:first-child + * + *,
.doubleColList > *:first-child + * + * + * + * + * + *,
.doubleColList > *:first-child + * + * + * + * + * + * + * + * + * + *{
	margin-right: 1.5544%;
}
.doubleColList > *:first-child + * + * + *,
.doubleColList > *:first-child + * + * + * + * + * + *,
.doubleColList > *:first-child + * + * + * + * + * + * + * + * + *{
	margin-right: 0;
}


.topImageBox2col .topImageBox{
	width: 100%;
}

}



/* for - 579px
=========================================================================================== */

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

/* ------ Arrow Box List ------ */
	.JS .selectListStyleMain {
		margin: 0 0 15px 0;
		text-align: left;
	}

	.JS .selectListStyleMain dd {
		display: block;
		width: 100%;
		margin: 0;
	}
	.JS .selectListStyleMain dt {
		display: block;
		width: 100%;
		padding: 10px 0;
	}
	.JS .selectListStyleMain dt:before {
		width: 0;
		height: 0;
		right: auto;
		left: 50%;
		margin: 0 0 0 -10px;
		background-image: none;
		border-left: solid 11px transparent;
		border-right: solid 11px transparent;
		top: auto;
		bottom: -10px;
		border-top: solid 10px #38761D;
	}
	.JS .selectListStyleMain dd p,
	.JS .selectListStyleMain dd ol,
	.JS .selectListStyleMain dd ul,
	.JS .selectListStyleMain dd dl,
	.JS .selectListStyleMain dd div .ImgRightAdjust {margin: 0 15px 10px;}


/* ------ PC or SP ------ */
.spOnly579{
	display: block;
}
.pcOnly579{
	display: none;
}
.envTitleStyle{
	background-color: #ffffff
}
.spImgTitle img{
	margin-bottom: 0px;
}

/* ------ Page Title ------ */
.JS .PageTitleStyle1 p.LogoStyle,
.JS .PageTitleStyle2 p.LogoStyle {
	right: 0;
}

/* ------ Social Button------ */
.Social{
	height: auto !important;
}

/* solution */
div.bgBoxPattern{
	width: 100%;
}


/* ------ TopPage blockImage ------ */
.topImageBox{
	width: 100%!important;
	float: none;
	background-color: #efefef;

	margin-right: 0px!important;
	margin-bottom: 1px!important;
}
.topImageBox a{
	padding: 10px;
}
.topImageBox a img{
	width: 120px!important;
	height: auto!important;
	position: absolute;
}
/*
.topBoxText{
	background: none;
	position: relative;
	background: transparent url("/sustainability/images/icon_r_arrow_black.png") no-repeat scroll right center;
}
.topBoxText2col{
	background: none;
	position: relative;
	background: transparent url("/sustainability/images/icon_r_arrow_black.png") no-repeat scroll right center;
}
*/
.textBg,.interviewtextBg{
	background: none;
	color: #434343;
	width: 100%;
	height: 67px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 140px;
}



.topImageBox2col{
	width: 100%;
	float: none!important;
	background-color: #EFEFEF!important;
	margin-bottom: 15px!important;
}
.bgW{
	background-color: #FFFFFF!important;
}
.textBg{
	min-height: 96px;
}
.interviewtextBg{
	height: 96px;
}

.topImageBox2col a{
	padding: 10px;
	text-decoration: none;
}
.topBoxText2col .textBg{
	padding-left: 0px;
}

.topImageList,.topImageList3set,.commonImageList{
	margin-bottom: 10px;
}

.inRightLink,.inRightLink02{
	display: none;
}

.RightLinkBox .envTitleStyle{
	padding-right: 0;
}
.envTitleStyle02{
	padding: 25px 0 1px 0;
}
.iconBarTitle{
	padding: 45px 5px 5px 5px;
	text-align: center;
}
.iconBarTitle h3{
	padding-right: 0px;
}
.iconArea{
	left: 50%;
	margin-left: -44px;
	top: -40px;
}
.topImageBox2col .envTitleStyle a{
	padding-right: 30px;
}
.topImageBox a{
	text-decoration: none;
}
.topImageBox a img{
	height: auto;
	border: none;
}
.topImageBox .topBoxNotes{
	padding: 5px 10px 0 10px;
}

.oneBlockOver3set .topImageList3set{
	margin-bottom: 0;
}

.newFlag{
	left: 10px;
	top: 10px;
	width: 60px;

}
.newFlag img{
	border: none!important;
}
/*
.topBoxText {
	background-image: url("/environment/images/icon_r_arrow_black_hd.png");
	background-size: 7px 9px !important;
}
.topBoxText2col {
		background-image: url("/environment/images/icon_r_arrow_black_hd.png");
	background-size: 7px 9px !important;
}
*/
}

/* for - 399px
=========================================================================================== */

@media screen and (max-width: 399px) {
/* ------ PC or SP ------ */
.spOnly399{
	display: block;
}
.pcOnly399{
	display: none;
}


/* ------ Table Scroll------ */
.envTableSet {
	margin-bottom: 20px;
}
.envTableSet div{
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}
.envTableSet div table {
	table-layout: fixed;
	width: 700px;
	margin-bottom: 0;
}
.envTableSet .attention{
	display: block;
}

}

/* for print
=========================================================================================== */

@media print {



}