@charset "utf-8";

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

Name: style.css

Create: 2025.6.
update: 

Copyright 2025 Hitachi, Ltd.

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


@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD #Contents {
		min-width: 290px;
		padding-right: 0;
		padding-left: 0;
	}
}

@media screen and (max-width: 994px) {
	.JS #Contents {
		min-width: 290px;
		padding-right: 0;
		padding-left: 0;
	}
}

.GridSet {
	width: 100%;
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD .GridSet {
		width: auto;
		max-width: 1329px;
		margin: 0 0 0 -25px;
		}
}
@media screen and (max-width: 994px) {
	.JS .GridSet {
		width: auto;
		max-width: 1009px;
		margin: 0 0 0 -15px;
	}
}


div.PageTitleStyle1, div.Section {box-sizing: border-box;} /*--box-sizing--*/

.Section {
	padding: 0 15px 50px;
	max-width: 1275px;
	margin: 0 auto;
	font-size: 100%;
}

a img:hover {
	opacity: 0.6;
}

p.ImgOnlyStyle strong {
	color: #666;
}

.TextStyle1 {
	font-size: 100%;
}

/*---------------------------　　トップイメージ　　-----------------------------------*/

div.TitleArea {margin-bottom: 30px;}

.PageTitleStyle1 {
	max-width: 1275px;
	margin: 0 auto;
	position: relative;
	background: url(/products/it/storage-solutions/topics/story003/images/top.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-color: #eaebeb;
	width: 100%;
	height: 440px;
	box-sizing: border-box;
	padding: 0 16px;
	background-size: cover;
}
@media screen and (max-width: 767px) {
	.PageTitleStyle1 {
		height: 190px;
	}
}

.TitleText {
	position: absolute;
	background-color: #ffffffc2;
	max-width: 85%;
	margin: 0;
	padding: 20px;
	top: 20%;
	left: 0;
}
@media screen and (max-width: 767px) {
	.TitleText {
		position: absolute;
		top: 10%;
		padding: 10px;
	}
}
@media screen and (max-width: 579px) {
	.TitleText {
		max-width: 90%;
	}
}


.PageTitleStyle1 h1 {
	box-sizing: border-box;
	font-size: 2em;
	color: #2d2d2d;
	padding : 20px;
}

@media screen and (max-width: 767px) {
	.PageTitleStyle1 h1 {
	font-size: 124% !important;
	padding : 10px;
	}
}
@media screen and (max-width: 579px) {

.JS .PageTitleStyle1, .JS .PageTitleStyle2 {padding: 0 20px 20px 20px;}
	.PageTitleStyle1 h1 {
		margin-bottom: 0;
	}
}

/*-----h1 改行表示-----*/

.brTitlePC{display:none;}

@media screen and (min-width:580px) and (max-width:994px) {
	.brTitlePC{display:block;}
}

@media screen and (min-width:580px) {
	.brTitleSP{display:none;}
}
@media screen and (max-width: 579px) {
	.brTitleSP{display:block;}
}



/*---------------------------　　コンテンツ内　　-----------------------------------*/


.Caption {
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 105%;
}
.Caption h2.thum {
	background-image: none;
	padding: 25px 40px;
	font-size: 115%;
	min-width: 8%;
	text-align: center;
	font-weight: bold;
}


.Caption .text {
	padding: 10px 20px;
	font-size: 100%;
	line-height: 1.45em;
}

.Caption.history {
	background-color: #D9D9D9;
}
.Caption.history h2.thum {
	background-color: #757575;
	color: #fff;
	margin-bottom: 0;
}

.Caption.assinment {
	background-color: #DEEBF7;
}
.Caption.assinment h2.thum {
	background-color: #5692C9;
	color: #fff;
	margin-bottom: 0;
}

.Caption.solution {
	background-color: #FBE5D6;
}
.Caption.solution h2.thum {
	background-color: #C55A11;
	color: #fff;
	margin-bottom: 0;
	padding: 15px 20px;
	min-width: 13%;
	line-height: 1.25em;
}

@media screen and (max-width: 994px) {
	.Caption .thum {
		min-width: 11%;
	}
	.Caption.solution h2.thum {
		min-width: 13%;
	}
}
@media screen and (max-width: 767px) {
	.JS h2 {
		margin: 0;
	}
	.Caption {
		display: block;
	}
	.Caption h2.thum {
		padding: 10px;
		font-size: 110%;
		text-align: center;
		font-weight: bold;
	}
}

h3 {
	margin: 30px 0 20px;
	position: relative;
	padding: 0 0 8px 0;
	color: #333;
	font-size: 110%;
}
#CaptionHistory h3 {
	color: #555;
}

#CaptionHistory h3:before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80%;
	height: 2px;
	content: '';
	border-radius: 3px;
	background-image: linear-gradient(to right, #757575 0%, #ffffff 100%);
}

#CaptionAssinment h3 {
	color: #4474a0;
}

#CaptionAssinment h3:before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80%;
	height: 2px;
	content: '';
	border-radius: 3px;
	background-image: linear-gradient(to right, #5692c9 0%, #ffffff 100%);
}

#CaptionSolution h3 {
	color: #7f3909;
}

#CaptionSolution h3:before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80%;
	height: 2px;
	content: '';
	border-radius: 3px;
	background-image: linear-gradient(to right, #c55a11 0%, #ffffff 100%);
}

#CaptionSolution .Section.point h3{
	color: #db5900;
}

.message {
	background-color: #DEEBF7;
	border-radius: 10px;
	padding: 20px;
}
.message p.TextStyle1 {
	margin-bottom: 0px;
	font-size: 110%;
	font-weight: bold;
}

.message p.TextStyle1 span {
	display: block;
	font-size: 90%;
	text-align: right;
	font-weight: normal;
	margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
	.message p.TextStyle1 span {
		display: block;
		text-align: left;
	}
}

.service {
	background-color: #fff0e5;
	border-radius: 10px;
	padding: 20px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}

.service .model {
	display: flex;
	justify-content: space-between;
}
.service .model .image {
	text-align: center;
}


@media screen and (max-width: 579px) {
	.service .model {
		display: block;
	}
}

br.sphid {
	display: none; 
}
@media screen and (min-width: 768px) {
	br.sphid {
		display: block; 
	}
}

@media screen and (max-width: 579px) {
	br.sphid02 {
		display: none;
	}
}

.point ul.ListStyle1 {
	font-size: 100%;
}

/*---------------------------　　関連・お問い合わせ　　-----------------------------------*/

.inq .ButtonStyle1 {
	font-size: 132%;
}