@charset "utf-8";
/* **************************************************

Name: srpartner.css

Description: Setting of content module

Create: 2017.06.01
Update: 2026.08.xx

Copyright 2017 Hitachi Systems, Ltd.

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

:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
	--Red_Grad: linear-gradient(145deg, #FA000F, #CC0000);
	--WhiteOp: #ffffffe6;
	--BlackOp: rgba(0, 0, 0, 0.08);
}
	html {
	scroll-behavior: smooth;
}

/* content===========================================
[c1] トップページ
[-] 共通クラス
===================================================== */



/* [c1] トップページ
=========================================================================================== */
.TopMarginSet.Top15 {
	padding-top: 15px;
}

.Grid3.TopPage,
.Grid1 .TopPage{
	margin-top: 8px;
}


/*------ ブランディングエリア ------*/
#BrandingArea {
	padding-bottom: 10px;
	text-align: center;
	background-color: var(--Gray1);
}
#BrandingArea img {
	width: 100%;
	height: auto;
}
#BrandingArea .TextStyle1 {
	margin: 0;
	padding: 2px 15px 3px;
}

/*------ 製品の特長および操作画面の紹介エリア ------*/
#ProductArea {
	padding: 15px 9px 10px;
	text-align: center;
	background-image: url("/-/media/ind/srpartner/image/bg_product.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: #e6e6e7;
	background-size: cover;
}

#InterfaceArea {
	padding: 15px 9px 11px;
	text-align: center;
	background-image: url("/-/media/ind/srpartner/image/bg_interface.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: #b7c8c8;
	background-size: cover;
}

#ProductArea h2,
#InterfaceArea h2 {
	display: inline-block;
	margin-bottom: 8px;
	padding: 0 40px 0 0;
	background-position: right center;
	background-repeat: no-repeat;
}

#ProductArea h2 {
	background-image: url("/-/media/ind/srpartner/image/bg_h2_product.png");
}

#InterfaceArea h2 {
	background-image: url("/-/media/ind/srpartner/image/bg_h2_interface.png");
}

#ProductArea h2 span,
#InterfaceArea h2 span {
	display: inline-block;
	padding: 0.2em 10px 0 50px;
	font-size: 150%;
	background-color: transparent;
	background-position: left center;
	background-repeat: no-repeat;
}

#ProductArea h2 span {
	color: #333333;
	background-image: url("/-/media/ind/srpartner/image/bg_h2_product.png");
}

#InterfaceArea h2 span {
	color: var(--White);
	background-image: url("/-/media/ind/srpartner/image/bg_h2_interface.png");
}

#ProductArea .TextStyle1,
#InterfaceArea .TextStyle1 {
	font-size: 100%;
	line-height: 150%;
}

#InterfaceArea .TextStyle1 {
	color: var(--White);
}

#ProductArea .ButtonStyle2 {
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

#ProductArea .ButtonStyle2 li {
	display: table;
	width: calc((100% / 4) - 1em);
	margin: 0;
}

#ProductArea .ButtonStyle2 li a {
	display: flex;
	min-width: 138px;
	height: 50px;
	padding: 5px 20px 2px 10px;
	font-size: 100%;
	align-items: center;
	vertical-align: middle;
	background-image: url("/-/media/image/jp/r1/icon/icon_link_right_xl_white.gif");
	border-bottom: 3px solid var(--Black);
	border-right-style: none;
}

#ProductArea .ButtonStyle2 li a:link,
#ProductArea .ButtonStyle2 li a:visited {
	color: var(--White);
	background-position: 90% center;
	background-color: var(--Gray5);
}
#ProductArea .ButtonStyle2 li a:hover,
#ProductArea .ButtonStyle2 li a:active {
	background-position: 150px center;
	background-color: #336999;
	text-decoration: none;
}

#InterfaceArea .InterfaceList {
	/*margin-left: -9px;*/
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

#InterfaceArea .InterfaceList li {
	position: relative;
	/*float: left;
	width: 228px;
	height: 165px;
	margin: 0 0 9px 9px;*/
	width: calc((100% / 3) - .8em);
}
#InterfaceArea .InterfaceList li img {
	width: 100%;
	height: auto;
}
#InterfaceArea .InterfaceList li a {
	display: block;
	width: 100%;
	height: 100%;
}

#InterfaceArea .InterfaceList li a .Caption {
	position: absolute;
	bottom: 0;
	left: 0;
	display: table;
	width: 100%;
	line-height: 130%;
}

#InterfaceArea .InterfaceList li a .Caption > span {
	display: table-cell;
	width: 100%;
	height: 47px;
	padding: 5px 25px 0 15px;
	text-align: left;
	vertical-align: middle;
	background-color: #01467f;
	border-bottom: 3px solid #12203a;
}
#InterfaceArea .InterfaceList li a .Caption > span, x:-moz-any-link {
	padding: 5px 5px 0 15px;
}

#InterfaceArea .InterfaceList li a:hover .Caption > span,
#InterfaceArea .InterfaceList li a:active .Caption > span {
	padding-right: 23px;
	background-color: #336999;
}
#InterfaceArea .InterfaceList li a:hover .Caption > span, x:-moz-any-link,
#InterfaceArea .InterfaceList li a:active .Caption > span, x:-moz-any-link {
	padding-right: 3px;
}

#InterfaceArea .InterfaceList li a .Caption > span > span {
	padding-right: 20px;
	color: var(--White);
	background-image: url("/-/media/image/jp/r1/icon/icon_link_right_xl_white.gif");
	background-position: right 40%;
	background-repeat: no-repeat;
}
#InterfaceArea .InterfaceList li a:hover .Caption > span > span,
#InterfaceArea .InterfaceList li a:active .Caption > span > span {
	padding-right: 22px;
}

/*------ 無料トライアルの紹介エリア ------*/
#TrialArea {
	position: relative;
	margin: 50px 0 30px;
	background-color: #f6f2e7;
}

#TrialArea.BoxPatternA h2 {
	margin-bottom: 10px;
	padding: 10px 15px 6px 237px;
	font-size: 155%;
	font-weight: bold;
	background-color: #be2014;
}

#TrialArea.BoxPatternA .Inner {
	margin-left: 222px;
}

#TrialArea.BoxPatternA .Inner .TextStyle1 {
	margin-bottom: 2px;
	font-size: 130%;
	font-weight: bold;
	padding: 0 15px !important;
	width: max-content;
	margin: auto;

}

#TrialArea.BoxPatternA .Inner .TextStyle1 strong {
	font-size: 175%;
	color: #992a33;
}

#TrialArea.BoxPatternA .Inner .TextStyle1 em {
	font-style: normal;
	font-size: 130%;
}

#TrialArea.BoxPatternA .Inner .ImgOnlyStyle {
	margin-bottom: 5px;
	padding: 0 15px !important;
	text-align: center;
}

#TrialArea .Img {
	position: absolute;
	bottom: 0;
	left: 30px;
	margin: 0;
	padding: 0;
}

/*------ ログインボタンエリア（右メニュー） ------*/
#LoginArea {
	margin: 0 0 10px;
	padding: 0;
}

#LoginArea h2 {
	display: table-cell;
	width: 230px;
	height: 40px;
	padding: 6px 10px 3px 55px;
	vertical-align: middle;
	font-size: 100%;
	font-weight: bold;
	color: var(--White);
	line-height: 130%;
	background-image: url("/-/media/ind/srpartner/image/bg_login.png");
	background-position: 9px 6px;
	background-repeat: no-repeat;
	background-color: #555555;
}

#LoginArea .Inner {
	padding: 8px 6px 3px;
	border: 3px solid #dddddd;
	border-top-style: none;
}

#LoginArea .Inner .LoginBtn li {
	margin-bottom: 8px;
	text-align: center;
}

#LoginArea .Inner .LinkListStyle1 {
	margin-bottom: 0;
	padding: 0 2px;
}

#LoginArea .Inner .LinkListStyle1 li {
	line-height: 110%;
	text-align: center;
}

#LoginArea .Inner .LinkListStyle1 li span {
	font-size: 71%;
}

/*------ 初期設定手順エリア（右メニュー） ------*/
#SettingArea .ImgOnlyStyle {
	margin-bottom: 5px;
}


/* [c-] faq
=========================================================================================== */

.list-faq-01 {
	font-size: 90%;
}

.list-faq-01 dt,
.list-faq-01 dd{
position:relative;
padding:10px 0 10px 30px;
line-height:1.3;

}

.list-faq-01 .ico-question-01,
.list-faq-01 .ico-answer-01{
position:absolute;
left:0;
top:11px;
}

.list-faq-01 dd ul.LinkListStyle1{
	font-size: 100%;
	margin-top: 10px;
}


/* [c-] 共通クラス
=========================================================================================== */
/*------ 画像サイズ調整 ------*/
.Grid3 .TextStyle1 img {
	max-width: 100%;
}
/*------ コーテシナビ（セパレータ調整） ------*/
#GlobalNavi .CourtesyNavi li {
	margin-top: 0.2em;
}

#GlobalNavi .CourtesyNavi *:first-child:after {
	display: none;
}


/*------ 見出し ------*/
h2.srp {
	padding: 5px;
	margin-bottom: 15px;
	background-image: none;
	background-color: var(--Gray1);
	border-bottom: 2px solid var(--Gray2);
}

h2.srp span {
	padding: 10px 0 7px 10px;
	color: var(--Gray6);
	background-color: transparent;
	border-left: 6px solid var(--Gray5);
}

h2.srp span a:link,
h2.srp span a:visited,
h2.srp span a:hover,
h2.srp span a:active {
	color: var(--Gray6) !important;
	text-decoration: none;
	background-image: none !important;
}

h3.srp {
	padding: 6px 10px 3px 5px;
	background-color: var(--Gray1);
	/*border-color: #3e67aa;*/
}


/*------ カラム ------*/
.W560 .Column1andHalf {
	width: 273px;
}

.ColumnSet.Interface .Column1 > .ImgOnlyStyle {
	margin-left: 30px;
}

/* 申し込みのボックス */
.ColumnSet.ContactBox {
	margin-bottom: 20px;
}

.ColumnSet.ContactBox .Column1andHalf {
	background-color: var(--Gray1);
}

.ColumnSet.ContactBox .Column1andHalf p {
	margin: 15px 15px 5px;
	line-height: 130%;
}

.ColumnSet.ContactBox .Column1andHalf a {
	display: block;
	margin: 0 15px 15px;
	text-align: center;
}


/*------ リスト ------*/
.AdditionalNotesStyle2.NoteStyleSp1 dt {
	width: 2.8em;
}

.AdditionalNotesStyle2.NoteStyleSp1 dd {
	margin-left: 2.8em;
}

/*機能一覧*/

.functionList { font-size: 90%; }
.functionList dt { font-weight: bold; }
.functionList dd { margin: 0 0 15px; }


/*------ リンク ------*/
a.rollover:hover img,
a.rollover:active img {
	-ms-filter: "alpha(opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
	zoom: 1;
}

.text-link-01 {
	background: url(/-/media/ind/srpartner/image/ico_arrow_01.gif) no-repeat left 0.25em;
	padding-left: 10px;
}

.text-link-02 {
	background: url(/-/media/ind/srpartner/image/ico_arrow_02.gif) no-repeat left 0.25em;
	padding-left: 20px;
}

a.lightbox {
	display: inline-block;
}

a.thickbox .caption {
	padding-left: 50px;
	background: url("/-/media/ind/srpartner/image/ico_zoom_01.gif") no-repeat left 0.25em;
}


/*------ データテーブル ------*/
table.tbl-data-01 th,
table.tbl-data-01 td.SubHeader {
	text-align: left;
}

table.tbl-data-01 td {
	text-align: center;
}

table.tbl-data-01 th.mod-align-c,
table.tbl-data-01 tr.mod-align-c td.SubHeader {
	text-align: center;
}


/*------ テキスト ------*/
text-notice-01 {
	margin-left: 1em;
	text-indent: -1em;
}


/*------ 汎用 ------*/
.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.W560 {
	/*width: 560px;*/
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.W560 .Column1andHalf a>img {
		display: block;
	}


/*------ 右メニュー ------*/
/* お問い合わせ */
#ContactArea {
	margin-bottom: 10px;
	padding: 6px;
	border: 3px solid #dddddd;
}

#ContactArea ul li:first-child {
	margin-bottom: 8px;
}


/* バナー */
#BannerArea img {
	margin-bottom: 0;
}


/* トピックス */
#TopicsArea {
	background-color: var(--Gray1);
}

#TopicsArea h2 {
	padding: 6px;
	margin-bottom: 0;
	background-image: none;
	background-color: var(--Gray4);
	position: relative;
	z-index: 1;
}

#TopicsArea h2 span {
	padding: 10px 0 7px 10px;
	color: var(--White);
	background-color: transparent;
	border-left: 6px solid var(--White);
	font-size: 100%;
}

#TopicsArea .DateListStyle1 dt {
	padding: 1em 10px 0.1em;
	font-size: 83%;
	line-height: 100%;
}

#TopicsArea .DateListStyle1 dd {
	padding: 1.8em 10px 0.8em;
	margin-top: -1.8em;
	line-height: 100%;
	border-top: 1px solid #dddddd;
}
#TopicsArea .DateListStyle1 dt:first-child + dd {
	border-top-color: var(--Gray1);
}
#TopicsArea .DateListStyle1 dd.bl-hover {
	background-color: #dddddd;
	border-top-color: #dddddd !important;
}

#TopicsArea .DateListStyle1 dd ul {
	margin-bottom: 0;
}

#TopicsArea .DateListStyle1 a:hover,
#TopicsArea .DateListStyle1 a:active {
	text-decoration: none;
	background-image: url("/image/jp/r1/icon/icon_link_right.gif");
}
/* Grid1 Area */
.Grid1 div#SettingArea img, .Grid1 div#ContactArea img, .Grid1 div#BannerArea img {
	width: 100%;
	height: auto;
	max-width: 230px;
	text-align: center;
	margin: auto;
}
#SettingArea .ImgOnlyStyle {
	margin: auto auto 5px;
	width: max-content;
}
#ContactArea ul li,
#BannerArea .ImgOnlyStyle {
	text-align: center;
}
/* Search */
#BrandingArea table.gsc-input {
	margin: 0;
}
#BrandingArea form.gsc-search-box {
	margin: auto;
}
#BrandingArea td.gsc-input {
	background: var(--Gray1);
	border: none;
	border-radius: 10px;
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	/*.OptionWideRWD .GridSet {
		margin: 0;
	}*/
}
@media screen and (max-width: 994px) {
	.JS #TrialArea.BoxPatternA .Inner .TextStyle1 {
		width: auto;
	}
	.JS #SettingArea .ImgOnlyStyle {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.JS br.PC {
		display: none;
	}
	.JS br.RWD {
		display: block;
	}
	.JS h2 {
		margin: 0;
	}
	.JS .W560 {
		width: auto;
	}
	.JS #TrialArea.BoxPatternA h2 {
		padding: 1em;
	}
	.JS .ColumnSet {
		margin: 0;
	}
	.JS .ColumnSet.ContactBox .Column1andHalf {
		padding: 1em;
		margin: 0 0 1em;
		height: stretch !important;
	}
}
@media screen and (max-width: 579px) {
	.JS #TrialArea.BoxPatternA .Inner {
		margin: auto;
	}
	.JS #TrialArea .Img {
		display: none;
	}
	.JS #ProductArea .ButtonStyle2 li,
	.JS #InterfaceArea .InterfaceList li {
		width: calc((100% / 2) - .8em);
	}
	.JS .W560 .Column1andHalf a>img {
		margin: auto;
	}
	.JS .ColumnSet.Interface .Column1 > .ImgOnlyStyle {
		margin-left: auto;
		text-align: center;
	}
}
@media screen and (max-width: 479px) {
	.JS #ProductArea .ButtonStyle2 li,
	.JS #InterfaceArea .InterfaceList li {
		width: 100%;
	}
}