@charset "Shift_JIS";


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

Name: common.css

Description: Setting of special page

Create: 2018.7.9
Update: 2018.7.9

Copyright Hitachi, Ltd. 2018. All rights reserved.

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

/* リンクカラー */

/*a:link {
	color:#004bbc;
}
a:visited {
	color: #551a8b;
}
a:hover {
	color: #b1000e;
}

.PageTop a:link,
.PageTop a:visited {
	color: #004bbc;
}

.HorizontalInnerLinks li a:link,
.HorizontalInnerLinks li a:visited,
.VerticalInnerLinks li a:link,
.VerticalInnerLinks li a:visited {
	color: #004bbc;
}
*/



/* オンマウスで透過 */
a:hover img.Onmouse{
	filter: alpha(opacity=80); /* IE7以下用 */
	-ms-filter: "alpha(opacity=80)"; /* IE8用 */
	opacity:0.8; /* Firefox 1.5以上, Opera, Safari用 */
	/*-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;*/
}




/* テーブル内リスト */
.TableStyleS1 ul.LinkListStyle1,
.TableStyle1 ul.LinkListStyle1,
.TableStyle2 ul.LinkListStyle1,
.TableStyle3 ul.LinkListStyle1,
.TableStyle3 dl.LinkListStyle1,
.TableStyleS1 ul.ListStyle1,
.TableStyle1 ul.ListStyle1,
.TableStyle2 ul.ListStyle2,
.TableStyle3 ul.ListStyle3{
 margin-bottom:0px;
 font-size:100%;
	}


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


/* トップページ */
body {background-color: #fff;}

.IndexContents {
	padding-left: 0!important;
	padding-right: 0!important;
}

#IndexGridSet {
	width: 100%;
}

#IndexGridSet .IndexContentsWide {
	max-width: 965px;
	margin: 0 auto;
}

.IndexArea {
	background-color:#C6E5DF;
	padding-top: 30px;
}

.IndexArea_picup {
	background-color:#fff3d2;
}
.IndexArea_picup h2 span {
	color: #5f0000;
}
.IndexArea_picup img {
	border: #fff solid;
}


/* トップページ 見出し */
h2.IndexTitle {
	background: none;
}

h2.IndexTitle span{
	background: none;
	font-size: 180%;
	text-align: center;
	font-weight:normal;
	letter-spacing:0.01em;
	padding:50px 20px 30px 20px;
}/**/

h2.IndexTitle span.Bd01, h2.IndexTitle span.Bd02, h2.IndexTitle span.Bd03 {
	position: relative;
	background: none;
	padding: 10px 20px;
	font-size: 200%;
	text-align: center;
	font-weight: normal;
	letter-spacing: 0.01em;
	/*margin-bottom: 1em;*/
}
h2.IndexTitle span.Bd01:before {
	content: '';
	position: absolute;
	bottom: 0;
	display: inline-block;
	width: 30%;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #cc0022;
	border-radius: 2px 8px;
}
h2.IndexTitle span.Bd02:before {
	content: '';
	position: absolute;
	bottom: 0;
	display: inline-block;
	width: 20%;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #cc0022;
	border-radius: 2px 8px;
}
h2.IndexTitle span.Bd03:before {
	content: '';
	position: absolute;
	bottom: 0;
	display: inline-block;
	width: 10%;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #cc0022;
	border-radius: 2px 8px;
}
h2.IndexTitle span.Bd01Sub {
	font-size: 150%;
	padding-top: 20px;
	padding-bottom: 10px;
}


/* トップページ 追随リンク */
.fixbanner {
	position: fixed;
	bottom: 10px; 
	right: 10px;
	padding: 6px 8px;
}
.fixbanner2 {
	position: fixed;
	bottom: 180px; 
	right: 0;
	/*padding: 6px 8px;*/
	opacity: 0;
}


/* トップページ 本文 */
.IndexContentsWide p.TextStyle1 {
	font-size:100%;
}

/* トップページ 最新トピックス */
/* --リンクエリア-- */
.TopicsWS a {
	text-decoration: none;
}
.TopicsWS a:hover {
	filter: alpha(opacity=80); /* IE7以下用 */
	-ms-filter: "alpha(opacity=80)"; /* IE8用 */
	opacity:0.8; /* Firefox 1.5以上, Opera, Safari用 */
	/*-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;*/
}

/* --カテゴリ-- */
.TopicsCategory {
	margin-bottom: 3px;
}
.TopicsCategory span {
	background-color: #d1d1d1;
	padding: 3px 15px;
	color: #0a0a0a;
	font-size: 73%;
}
.TopicsTitle {
	font-size: 100%;
	font-weight: bold;
	color: #575757;
	line-height: 150%;
}

/* --ボタン-- */
p.btn_s {
	margin:20px 0 20px 0;
}
p.btn_s span {
	display: inline-block;
	padding:5px 30px;
	text-align:center;
	color:#CC0022;
	font-size: 90%;
	text-decoration:none;
	background:url("/image/jp/r1/icon/icon_link_right.gif") no-repeat 88% 50%;
	/*background-color:#FF0000;*/
	border: solid 1px #CC0022;
}
p.btn_s span:hover {
	background:url("/image/jp/r1/icon/icon_link_right_hover.gif") no-repeat 88% 50%;
	background-color:#ffdbdb;
}


/* トップページ ソリューション／サービス */

h2.IndexTitle strong.Newtxt {
	color: #c02;
	/*font-weight: normal;*/
}


.SolTxt {
	font-size: 90%;
	color: #575757;
}



/* トップページ ボタン */
p.btn {
	margin:20px 0 20px 0;
}
p.btn a {
	display: inline-block;
	padding:10px 40px;
	text-align:center;
	color:#CC0022;
	text-decoration:none;
	background:url("/image/jp/r1/icon/icon_link_right_hd.gif") no-repeat 98% 50%;
	/*background-color:#FF0000;*/
	border: solid 1px #CC0022;
}
p.btn a span{
	display:block;
	font-weight:normal;
	font-size:80%;
}
p.btn a:hover {
	background:url("/image/jp/r1/icon/icon_link_right_hover_hd.gif") no-repeat 98% 50%;
	background-color:#ffdbdb;
}


/* トップページ ソリューション/サービス */
/* --可変ボックス-- */

.Box01, .Box02, .Box03, .Box04 {
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
	background-position: left top, right top, left bottom, right bottom, top, bottom, left, right;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	padding: 10px;
	border-radius: 3px;
}

/* --ソリューションイメージ＋タイトル-- */
.ThumbW160SetStyle .Img {
	float: left;
	padding: 0 20px 0 0;
}

.ImgW160SetStyle .Img {
	float: left;
	padding-bottom: 15px;
}
.ThumbW160SetStyle .Img,
.ImgW160SetStyle .Img {width: 160px;}

.ThumbW160SetStyle .ImgSet {overflow: hidden;}

.ImgW160SetStyle .ImgSet {
	float: right;
	width: 100%;
}

.ImgW160SetStyle .ImgSet {margin-left: -160px;}

.ImgW160SetStyle .ImgSet dl {margin-left: 180px;}

.LinkListStyle1 dt a:link,
.LinkListStyle1 dt a:visited,
.LinkListStyle1 dt a:hover,
.LinkListStyle1 dt a:active { background-image: none;}/**/


/* --ソリューション　リンクボタン-- */
.innovation_btn, .work_btn, .life_btn, .healthcare_btn {
	display: inline-block;
	margin-top:5px;
	margin-bottom:3px;
}
.innovation_btn a, .work_btn a, .life_btn a, .healthcare_btn a {
	padding: 5px 20px 5px 10px;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
	font-size: 80%;
	background: url(/image/jp/r1/icon/icon_link_right_l_white.gif) no-repeat 97% 50%;
	border-radius: 5px;
	border: none;
}
.innovation_btn a:hover, .work_btn a:hover, .life_btn a:hover, .healthcare_btn a:hover {
	background:url("/image/jp/r1/icon/icon_link_right_l_white.gif") no-repeat 99% 50%;
}

.innovation_btn a {
	background-color: #927F33;
}
.innovation_btn a:hover {
	background-color:#AE9F66;
}
.work_btn a {
	background-color: #3A9A7B;
}
.work_btn a:hover {
	background-color:#6CB49C;
}
.life_btn a {
	background-color: #387EA4;
}
.life_btn a:hover {
	background-color:#6A9EBB;
}
.healthcare_btn a {
	background-color: #945F6A;
}
.healthcare_btn a:hover {
	background-color:#AF8790;
}



/* トップページ TOPICS */
div.IndexContentsWide dl.DateListStyle2 dd{
	margin-left: 15em !important;
}
div.IndexContentsWide dl.DateListStyle2 dt{
	width: 14.5em;
}
div.IndexContentsWide dl.DateListStyle2 dt img{
	float: right;
	width: 6em;
	height: 100%;
}


/* トップページ 関連情報 さらに表示ボタン */
#moreBtn {
	margin-bottom: 25px;
	padding: 12px;
	background-color: #e5e5e5;
	text-align: center;
	cursor: pointer;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

#moreBtn:hover {
	background-color: #d1d0d0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}




/* お問い合わせBOX */
.ws_solInquiryArea{
	background-color:#C6E5DF;
	padding:30px 30px 15px 30px;
}

.ws_solInquiryArea h2{
	margin:5px 0 30px 0;
	line-height:100%;
	background: none;
}

.ws_solInquiryArea h2 span{
	/*color:#fff;*/
	font-size: 180%;
	padding:0px;
	line-height:100%;
	text-align: center;
	background: none;
}


.ws_solInquiryBoxes{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	justify-content: center;

}

.ws_solInquiryBox1{
	padding:25px 30px 0;
	margin-bottom:15px;
}

.ws_solInquiryBox2{
	background-color:#fff;
	padding:25px 30px 0;
	margin-bottom:15px;
}

.ws_solInquiryBox1 .ws_solBtn a,
.ws_solInquiryBox2 .ws_solBtn a {
	width:100%;
}

.ws_solInquiryBox1 .ws_solBtn a span,
.ws_solInquiryBox2 .ws_solBtn a span{
	font-weight:normal;
	font-size: 90%;
}

.ws_solInquiryBoxes.col2 div.ws_solInquiryBox1,
.ws_solInquiryBoxes.col2 div.ws_solInquiryBox2{
	width: calc((100% - 135px)/2);
}

.ws_solInquiryBoxes.col2 div{
	margin-right:15px;
}

.ws_solInquiryBoxes.col2 div:nth-child(2n){
	margin-right:0;
}




/* 日立の取り組み TOP */
div.ImgBoxStyle2 div.Inner h2 {
	font-size:150%;
	color:#15446F;
}

h2.WS_sol {
	font-size: 140%;
	color: #15446F;
	margin: 0 0 15px;
	padding: 0;
	font-weight: bold;
	line-height: 140%;
	background-color: transparent;
	background-image: none;
}




/* トピックス 一覧 */
dl#Topics dd ul.LinkListStyle1 {
	padding-bottom:15px;
}

dl#Topics dd ul.LinkListStyle1 li a {
	font-weight:bold;
}




/* イノベーションブレスト会議 */
.BoxPatternB h2.TitleStyle01 {
	text-align: center;
	font-size: 160%;
	letter-spacing: 1em;
}





/* 共通 */
.pcOnly { display: block; }
.spOnly { display: none; }
.spOnlyInline { display: none; }
.mb0 { margin-bottom: 0px!important; }
.mb15 { margin-bottom: 15px!important; }
.mb40 { margin-bottom: 40px!important; }
.mb50 { margin-bottom: 50px!important; }
.mb70 { margin-bottom: 70px!important; }



/* for - 994px
=========================================================================================== */
@media screen and (max-width: 994px) {
	#Contents {
		background:none ;
		background-color:#fff;
	}
	.JS #IndexGridSet.GridSet {
		width: auto;
		max-width: 980px;
		margin: 0 0 0 -15px;
	}

	#IndexGridSet .IndexContentsWide {
		padding-left: 15px!important;
		padding-right: 15px!important;
	}
	.BrandingArea02 {
		background-size: cover;
	}
	.BrandingArea img, .BrandingArea02 img {
		max-width: 100%;
		height: auto;
	}
	h2.IndexTitle span.Bd01:before {width: 40%;}

	/*.Box01, .Box02, .Box03, .Box04 {height: 215px; }*/

	.JS .ThumbW160SetStyle .Img {padding-right: 20px;}

	.JS .ImgW160SetStyle .Img {
		float: left;
		padding: 0 20px 15px 0;
	}

	.ThumbW160SetStyle .Img,
	.ImgW160SetStyle .Img {width: 38%;}

	.ImgW160SetStyle .ImgSet {
		float: none;
		width: auto;
		margin: 0;
		overflow: hidden;
	}

	.ImgW160SetStyle .ImgSet dl {margin: 0;}


/* トップページ ボタン */

p.btn a {
	display: block;
	padding: 10px 40px 10px 10px;
}


}

/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {

	.JS body { background-color: #fff; }

	.ws_solInquiryArea{
		padding:20px 15px;
	}
	.ws_solInquiryBoxes.col2{
		display:block;
	}
	.ws_solInquiryBoxes.col2 div.ws_solInquiryBox1,
	.ws_solInquiryBoxes.col2 div.ws_solInquiryBox2{
		width: calc(100% - 30px);
		margin:15px 0 0 0;
		padding:15px;
	}
	.ws_solInquiryBoxes.col2 div.ws_solInquiryBox1 p.ws_solBtn,
	.ws_solInquiryBoxes.col2 div.ws_solInquiryBox2 p.ws_solBtn{
		margin-bottom:0;
	}
	.ws_solInquiryArea h2{
		margin-top:0;
	}

	.ws_solInquiryBoxes.col2 div.ws_solInquiryBox1:last-child,
	.ws_solInquiryBoxes.col2 div.ws_solInquiryBox2:last-child{
		margin-top:15px;
	}

	h2.IndexTitle span.Bd01, h2.IndexTitle span.Bd02, h2.IndexTitle span.Bd03 {
		font-size: 180%;
	}

	h2.IndexTitle span.Bd02:before {width: 30%;}
	h2.IndexTitle span.Bd03:before {width: 20%;}

	.Box01, .Box02, .Box03, .Box04 {height: auto; }

	.ThumbW160SetStyle .Img,
	.ImgW160SetStyle .Img {width: 160px;}



}


/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px) {

	.JS .PageTitleStyle3 {
		background: none;
	}
	/* トップページ TOPICS */
	div.IndexContentsWide dl.DateListStyle2 dd{
		margin-left: 0em !important;
	}

	h2.IndexTitle span.Bd01:before {width: 50%;}
	h2.IndexTitle span.Bd02:before {width: 40%;}

	.ThumbW160SetStyle .Img,
	.ImgW160SetStyle .Img {width: 32%;}

}

/* for - 399px
=========================================================================================== */
@media screen and (max-width: 399px) {

	.ThumbW160SetStyle .Img,
	.ImgW160SetStyle .Img {width: 160px;}

	.ThumbW160SetStyle .Img {
		float: none;
		padding: 0;

}