@charset "Shift_JIS";

.PageTitleStyle1 {
	margin: 0px auto 25px;
	max-width: 1275px;
}


h2{
	margin:0 0 15px;
}

div#BrandingArea{
	background:url('/Prod/comp/soft1/jp1/img/brandingBack.png') no-repeat top right;
	background-size:auto 100%;
	height:650px;
}
div#BrandingWrap{
	max-width:1275px;
	margin:0 auto;
	padding-left: 10px;
	display:flex;
	justify-content:space-between;
}
div#BrandingWrap div#BrandingInner{
	padding:20px 0 0;
}
div#BrandingInner p#BrandingCatchcopy{
	font-size:160%;
	line-height: 120%;
	text-shadow: 2px 2px 2px #FFF, -2px 2px 2px #FFF, 2px -2px 2px #FFF, -2px -2px 2px #FFF;
}
div#BrandingInner p#BrandingTitle{
	font-size:280%;
	font-weight:bold;
	margin:0 0 20px;
	text-shadow: 2px 2px 2px #FFF, -2px 2px 2px #FFF, 2px -2px 2px #FFF, -2px -2px 2px #FFF;
}
div#BrandingWrap div#BrandingOption{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	margin-right: 0px;
}
div#BrandingOption dl{
	background:rgba(255, 255, 255, 0.9);
	border-radius:0 0 0.5em 0.5em;
	border-top:7px solid #B1000E;
	text-align:center;
	padding:30px 10px;
	margin-left: 37%;
	box-sizing:border-box;
	width:60%;
	/*margin-left:10%;*/
}
div#BrandingOption dl dt{
	font-size:76%;
}
div#BrandingOption dl dd a{
	font-size:90%;
}

div#BrandingOption div.TopPageMovieArea p.ImgOnlyStyle{
	font-size: 120%;
	text-shadow: 1px 1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF;
	margin-right: 300px;
}

div#BrandingOption div.TopPageMovieArea p.ImgOnlyStyle img{
	border: #B5E61D solid 5px;
	border-radius: 1em;
}

div#BrandingOption div.TopPageMovieArea .ButtonStyle1 a:link, .ButtonStyle2 a:link, .ButtonStyle1 a:visited, .ButtonStyle2 a:visited {
	background-color: #2e4173;
}


div.TopPageMovieArea2{
	font-size: 150%;
	border-radius: 1em;
	float: right;
	display: flex;
	position: relative;
	margin: -100px 300px 0px 0px;
}

div.TopPageMovieArea2 .ButtonStyle1 li {
	padding-right: 25px;
}

div.TopPageMovieArea2 .ButtonStyle1 a:link, .ButtonStyle2 a:link, .ButtonStyle1 a:visited, .ButtonStyle2 a:visited {
	background-color: #b1000e;
	border-radius: 1em;
	padding-right: 40px;
}

div.TopPageMovieArea2 .ButtonStyle1 a {
	background-image: url("https://www.hitachi.co.jp/image/jp/r1/icon/icon_movie_white_hd.png");
	background-size: 30px 30px;
	text-align: left;
}


div#solutionArea{
	background:url('/Prod/comp/soft1/jp1/img/solutionBack.png') no-repeat top center;
	background-size:cover;
	padding:75px 15px 75px 15px;
}
div#solutionArea div#MainSolution div.FlexItem{
	flex-basis:32%;
	margin:0;
}
div#solutionArea div#MainSolution div.FlexItem:first-child{
	margin-right:auto;
}
div#solutionArea div#MainSolution div.FlexItem:last-child{
	margin-left:auto;
}
div#solutionArea div#MainSolution h3{
	font-weight:normal;
	font-size:150%;
	color:#333;
}
div#solutionArea div#MainSolution h3 span{
	display:block;
	font-size:80%;
	color: #7E000A;
}
div#solutionArea div#MainSolution a{
	background:#2E4173;
	color:#FFF;
	display:block;
	border-radius:1em;
	padding:5px 0;
}
div#solutionArea div#MainSolution a span{
	background:url('/image/jp/r1/icon/icon_link_right_l_white_hd.gif') no-repeat center right;
	background-size:15px auto;
	padding:0 20px 0 0;
	background-position-x:calc(100% - 3px);
}
div#solutionArea div#MainSolution a:hover span{
	padding:0 20px 0 0;
	background-position-x:100%;
}
/*リンク2つ並び*/
div#solutionArea div#MainSolution ul.FlexWrap{
	justify-content:space-between;
}
div#solutionArea div#MainSolution ul.FlexWrap li{
	flex-basis:49%;
}
div#solutionArea div#MainSolution ul.FlexWrap li:first-child a{
	border-radius:1em 0.3em 0.3em 1em;
}
div#solutionArea div#MainSolution ul.FlexWrap li:last-child a{
	border-radius:0.3em 1em 1em 0.3em;
}

ul#SecoundSolution{
	justify-content:space-between;
	flex-wrap:wrap;
}
ul#SecoundSolution li a{
	background:url('/Prod/comp/soft1/jp1/img/solution_8.png') no-repeat top center;
	background-size:auto 150px;
	min-width:150px;
	padding:160px 0 0;
	text-align:center;
	display:block;
	color:#333;
}
ul#SecoundSolution li:first-child a{
	background:url('/Prod/comp/soft1/jp1/img/solution_4.png') no-repeat top center;
	background-size:150px auto;
}
ul#SecoundSolution li:nth-child(2) a{
	background:url('/Prod/comp/soft1/jp1/img/solution_5.png') no-repeat top center;
	background-size:150px auto;
}
ul#SecoundSolution li:nth-child(3) a{
	background:url('/Prod/comp/soft1/jp1/img/solution_6.png') no-repeat top center;
	background-size:150px auto;
}
ul#SecoundSolution li:nth-child(4) a{
	background:url('/Prod/comp/soft1/jp1/img/solution_7.png') no-repeat top center;
	background-size:150px auto;
}
ul#SecoundSolution li:last-child a{
	background:url('/Prod/comp/soft1/jp1/img/solution_9.png') no-repeat top center;
	background-size:150px auto;
}

div#pickupArea{
	background:url('/Prod/comp/soft1/jp1/img/solutionBack.png') no-repeat top center;
	background-size:cover;
	padding:75px 15px 75px 15px;
	position: relative;
	z-index: 1;
}
div#pickupArea div.FlexWrap{
	width:1275px;
	margin:0 auto;
	justify-content:center;
	padding: 0px 0px 40px 0;
}
div#pickupArea a.FlexItem{
	display:block;
	width:25%;
	min-width:230px;
}
div#pickupArea a.FlexItem div.pickupItem{
	min-height:280px;
}
div#pickupArea a.FlexItem p.ImgOnlyStyle{
	width:90%;
	margin:0 auto;
	position:relative;
	z-index:90;
}
div#pickupArea a.FlexItem p.ImgOnlyStyle img{
	margin:0;
}
div#pickupArea a.FlexItem div.Inner{
	width:84%;
	background:#FFF;
	box-sizing:border-box;
	padding:10px 15px;
	min-height:170px;
	margin:-30px auto 0;
	position:relative;
	z-index:91;
}
div#pickupArea a.FlexItem div.Inner h3{
	background:#2E4173;
	display:inline-block;
	font-size:83%;
	padding:3px 15px;
	color:#FFF;
}
div#pickupArea a.FlexItem div.Inner b.pseudoAnchor{
	font-weight:normal;
	font-size:80%;
}

div#NewsBox{
	width:965px;
	margin:0 auto;
	border-top:3px solid #2E4173;
	background:#FFF;
	box-shadow:2px 2px 2px RGBA(0, 0, 0, 0.1), -2px 2px 2px RGBA(0, 0, 0, 0.1);
	padding:20px 30px 40px;
	box-sizing:border-box;
}


div#productlistArea{
	background:url('/Prod/comp/soft1/jp1/img/productlistBack.png') no-repeat top center;
	background-size:cover;
	padding:75px 15px 75px 15px;
}
div#productlistArea div.productBlock{
	max-width: 1275px;
	margin: 0px auto 0px auto;
	border-top:1px solid #B3B3B3;
	padding:30px 0;
}
div#productlistArea div.productBlock:last-child{
	border-bottom:1px solid #B3B3B3;
}
div#productlistArea div.productBlock ul{
	flex-wrap:wrap;
	margin:0 0 25px;
}
div#productlistArea div.productBlock ul li{
	flex-basis:50%;
}
div#productlistArea div.productBlock ul li a{
	color:#333;
}

div#RelatedLinks{
	background:#f2f2f2;
	padding-top:20px;
}

div.BottomSetBanner ul{
	display:inline-block;
}
div.BottomSetBanner ul li{
	float:left;
	width:230px;
	margin:0 0 15px 15px;
}


/* for 1620px -
=========================================================================================== */
@media screen and (max-width: 1620px){
	.JS div#BrandingArea{
		background:url('/Prod/comp/soft1/jp1/img/brandingBack.png') no-repeat top center;
		/*background-position:top center;*/
		background-size:cover;
	}
}

/* for 1280px -
=========================================================================================== */
@media screen and (max-width: 1279px){
	.JS div#BrandingArea{
		background:url('/Prod/comp/soft1/jp1/img/brandingBack.png') no-repeat top center;
		/*background-position:top center;*/
		background-size:cover;
	}
	div#BrandingOption dl{
		margin-left: 0%;
	}
	.JS div#pickupArea div.FlexWrap{
		width:auto;
	}
}

/* for - 994px
=========================================================================================== */
@media screen and (max-width: 994px){
	.JS div#BrandingArea{
		background-position:top left;
		height:auto;
	}
	.JS div#BrandingWrap{
		display:block;
		max-width:none;
		width:100%;
		padding-left: 0px;

	}
	.JS div#BrandingWrap div#BrandingInner{
		text-align:center;
	}
	div#BrandingWrap div#BrandingOption{
		margin-right: 0px;
	}
	.JS div#BrandingOption dl{
		margin:0 auto 20px;
		width:320px;
	}
	div#BrandingOption div.TopPageMovieArea p.ImgOnlyStyle{
		font-size: 120%;
		text-shadow: 1px 1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF;
		margin-right: 0px;
	}
	.JS div#NewsBox{
		width:100%;
	}

}

/* for - 965px
=========================================================================================== */
@media screen and (max-width: 964px){
	.JS div#BrandingWrap div#BrandingInner{
		width:90%;
		margin:0 auto 20px;
	}
	.JS div#BrandingWrap div#BrandingOption{
		padding:0 15px;
	}
	.JS ul#SecoundSolution li{
		width:33%;
		margin:0 0 20px;
	}
	.JS div#pickupArea div.FlexWrap{
		flex-wrap:wrap;
	}
}
/* for - 860px
=========================================================================================== */
@media screen and (max-width: 860px){
	
}

/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px){
	.JS div#BrandingInner p#BrandingTitle{
		font-size:200%;
	}
	.JS div#BrandingInner p#BrandingCatchcopy{
		font-size:120%;
	}
	.JS div#solutionArea div#MainSolution div.FlexItem,
	.JS div#solutionArea div#MainSolution div.FlexItem:first-child,
	.JS div#solutionArea div#MainSolution div.FlexItem:last-child{
		margin:0 0 50px;
	}
	.JS div#solutionArea div#MainSolution ul.FlexWrap li:first-child a{
		border-radius:1em 1em 0.3em 0.3em;
		margin:0 0 10px;
	}
	.JS div#solutionArea div#MainSolution ul.FlexWrap li:last-child a{
		border-radius:0.3em 0.3em 1em 1em;
	}
	.JS ul#SecoundSolution{
		display:flex;
	}
	.JS ul#SecoundSolution li{
		width:50%;
	}
	.JS div#pickupArea a.FlexItem{
		margin:0 auto 20px;
		width:50%;
		min-width:300px;
	}
}

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

/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px){
	.JS div#BrandingOption dl{
		width:100%;
		max-width:350px;
	}
}
/* for - 515px
=========================================================================================== */
@media screen and (max-width: 514px){
	
}
/* for - 415px
=========================================================================================== */
@media screen and (max-width: 415px){
	.JS ul#SecoundSolution{
		display:block;
	}
	.JS ul#SecoundSolution li{
		width:100%;
	}
}

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