@charset "Shift_JIS";

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

Name: dms css

Description: Setting of content データマネジメントサービス page module

Create: 2023.5.18
Update: 

Copyright Hitachi, Ltd. 2023. All rights reserved.

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


/*====== .dms_ft アコーディオン //=======*/

.dms_ft .dms_ft_inner {
	display: none;
	padding: 0;

}
.dms_ft h3{
	position:relative;

	background-color:#008284;
	box-sizing:border-box;
	border-radius:3em;
	padding:15px 45px 15px 15px;
}
.dms_ft h3 span{
	display:block;
	position:relative;
	text-indent:-4em;
	padding-left:5em;
	color:#fff;
}
.dms_ft h3:hover{
	cursor:pointer;
	opacity:0.8;
}
.dms_ft h3:after{
	content:'＋';

	position:absolute;
	right:0.75em;
	bottom:50%;
	transform: translateY(50%);
	color:#fff;
	font-size:135%;
}
.dms_ft h3.open:after{
	content:'−';
}




/*--------------　お問い合わせボタン//　----------------*/

.ButtonStyle1 {
	margin-top: 40px;
}
.ButtonStyle1 a:link, .ButtonStyle1 a:visited {
	background-color: #2B4A85;
	border-right: none;
	padding: 25px 0;
}
.ButtonStyle1 a:hover {
	padding: 25px 0;
	opacity: .8;
}
.ButtonStyle1 a {
	background-image: none;
	box-sizing: border-box;
	font-size: 110%;
	padding: 30px 0;
	width: 230px;
}

/*--------------　//お問い合わせボタン　----------------*/

/* 改行 */
.sp, .sp-h1 {display: none;}



/* 背景つきH1タイトル */
.PageTitleStyle3.backimgTitle{
	display: flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-o-align-items: center;
	align-items: center;
	min-height:160px;
}
.PageTitleStyle3.backimgTitle.dms{
	background: url("/products/it/IoTM2M/list/dms/images/pagetitle.png") no-repeat ;
}
.PageTitleStyle3.backimgTitle h1{
	color:#fff;
	font-size:18pt;
	font-weight:bold;
}
.PageTitleStyle3.backimgTitle .h1_catchcopy{
	margin:0;
	color:#fff;
	font-size:12pt;
	text-shadow: 3px  3px 5px #011F5B,
				-3px  3px 5px #011F5B,
				 3px -3px 5px #011F5B,
				-3px -3px 5px #011F5B;
}
.PageTitleStyle3.backimgTitle.dms h1{
	text-shadow: 5px  5px 10px #000,
				-5px  5px 10px #000,
				 5px -5px 10px #000,
				-5px -5px 10px #000,
				 5px  5px 10px #000,
				-5px  5px 10px #000,
				 5px -5px 10px #000,
				-5px -5px 10px #000;
}
.PageTitleStyle3.backimgTitle.dms .h1_catchcopy{
	text-shadow: 3px  3px 10px #000,
				-3px  3px 10px #000,
				 3px -3px 10px #000,
				-3px -3px 10px #000,
				 3px  3px 10px #000,
				-3px  3px 10px #000,
				 3px -3px 10px #000,
				-3px -3px 10px #000;
}
.PageTitleStyle3.backimgTitle.dms{
	padding-left:30px;
	padding-right:30px;
	background-size:auto 160px;
	background-position-x:right;
	height:100%;
}


/* テーブル関連 ------------------------ */



table.TableStyle1.price th:first-child,
table.TableStyle1.price  th[scope="row"]{
	display:none;
}

/* ボックス ------------------------ */

div.dms_box {
	border:3px solid #eee;
	padding:15px;
	margin-bottom:15px;
}
div.dms_box *:last-child{
	margin-bottom:0;
}



div.dms_box dl dt{
	background:none;
	float:left;
	width:5em;
	padding:0;
	color:#0070C0;
	font-weight:bold;
}
div.dms_box dl dt:after{
	content:" :";
	color:#333;
}
div.dms_box dl dd{
	float:left;
	width:calc(100% - 7em);
}
div.dms_box dl dd ul.ListStyle1{
	margin-top:5px;
	font-size:100%;
}
div.dms_box p.ImgOnlyStyle{
	margin-bottom:15px;
}


ul.dms_colbox {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.dms_colbox li{
	display:flex;
	width:calc((100% - 30px)/2);
	margin-bottom:15px;
}
ul.dms_colbox li:not(:last-child){
	margin-right:15px;
}
ul.dms_colbox li a{
	display:flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	background-color:#008284;
	box-sizing:border-box;
	padding:15px;
	font-size:90%;
	text-decoration:none;
	color:#fff;
}
ul.dms_colbox li a img{
	display:block;
	width: 40%;
}
ul.dms_colbox li a:hover{
	opacity:0.8;
}



/* [-] レスポンシブ対応
=========================================================================================== */


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


}


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

}

/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {
	.JS #Contents ul.dms_colbox {
		flex-direction: column;

	}

	.JS #Contents ul.dms_colbox li {
		width: 100%;

	}

	.JS #Contents ul.dms_colbox li a img{
		width: 30%;
		min-width: 100px;
	}

	.PageTitleStyle3.backimgTitle.dms{
		margin-left:-15px;
		margin-right:-15px;
	}

	.sp, .sp-h1 {display: block;}

}

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

	ul.dms_colbox li{
		width:calc((100% - 15px)/2);
	}
	ul.dms_colbox li:nth-child(2){
		margin-right:0;
	}
}

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

	.dms_ft h3{
		padding-right:50px;
	}

	ul.dms_colbox{
		display: block;
	}
	ul.dms_colbox li{
		width:100%;
	}


}