@charset "utf-8";

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

Name: common.css

Description: Setting of content module

Create: 2018.03.22
Update: 2024.01.30

Copyright 2023 Hitachi, Ltd. 

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


body {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif;
}

#Contents {
	position: relative;
	padding-bottom: 60px;
}


.mb100 {
	margin-bottom: 100px !important;
}

#Footer {
	margin-top: -1px;
}

/* ---[-] もっと見るボタン：202311追加-- */
dl.TopicsList .is-hidden{
	display: none;
}
div.moreBtn {
  padding-bottom: 20px;
}
div.moreBtn.gray #moreBtn {
	border: solid 1px #333;
	background-color: transparent;
	color: #333;
}
div.moreBtn.white #moreBtn {
	border: solid 1px #fff;
	background-color: transparent;
	color: #fff;
}

#moreBtn {
	font-weight: bold;
	max-width: 240px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
	margin-bottom: 30px;
	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 {
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

div.moreBtn.gray #moreBtn:hover {
	background-color: rgba(51, 51, 51, 0.2);
}

div.moreBtn.white #moreBtn:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

div.moreBtn {
	padding-bottom: 30px;
}

div.moreBtn #moreBtn {
    margin-bottom: 0;
}


/* ---[-] お問い合わせボタン（フローティング）：202012追加-- */
#Contents #Download {
	padding-bottom: 100px;
	margin-bottom: -60px;
}

#Contents #DownloadContents .Section {
	margin-bottom: 55px;
}

#Contents #example,
#Contents #LinkArea {
	margin-bottom: -60px;
	padding-bottom: 60px;
}
#Contents #Download + #LinkArea {
	margin-top: -95px;
}

#Contents #example #exampleContents,
#Contents #LinkArea .BtnArea {
	padding-bottom: 10px;
}

#Contents #exampleContents .inlineEx,
#Contents #LinkArea .Button {
	margin-bottom: 20px;
	vertical-align: top;
}

#Contents > .GridSet .Grid4 .AdditionalNotesStyle3:last-child {
	margin-bottom: 40px;
}

#FloatContact {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 50;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.75);
}
#FloatContact.Fixed {
	position: fixed;
}

#FloatContact ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
}

#FloatContact ul li {
	width: 320px;
	/*max-width: 100%;*/
	max-width: calc(100% - 80px);
}

#FloatContact li a {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
	padding: 0 10px;
	background-color: #b31212;
	text-decoration: none;
	border-radius: 2px;
	box-sizing: border-box;
}
.PC #FloatContact li a:hover,
.PC #FloatContact li a:active {
	background-color: #c24141;
}

#FloatContact li a span {
	display: inline-block;
	vertical-align: top;
	padding: 0.1em 0 0 30px;
	font-weight: bold;
	color: #ffffff;
	background-position: left center;
	background-repeat: no-repeat;
}
#FloatContact li.contact a span {
	background-image: url(/products/it/appsvdiv/image/appsvdiv/icon/contact.png);
}


/* ---[-] ページ内リンク調整他：202103追加-- */
#TopPageTitleArea {
	border-bottom-style: none !important;
}

#InnerLinksArea {
	padding: 10px 0 8px;
}
#InnerLinksArea.JustwareTop {
	background-color: #1f357d;
}
#InnerLinksArea.Justware {
	background-color: #312a52;
}
#InnerLinksArea.JustwarePF {
	background-color: #00477a;
}
#InnerLinksArea.Dataviz {
	background-color: #0064b3;
}
#InnerLinksArea.Agile {
	background-color: #f2d000;
}
#InnerLinksArea.Devops {
	background-color: #185b24;
}
#InnerLinksArea.Microservices {
	background-color: #00758c;
}
#InnerLinksArea.ALM {
	background-color: #005fd7;
}
#InnerLinksArea.Migration {
	background-color: #007a99;
}
#InnerLinksArea.Sentiment {
	background-color: #008580;
}
#InnerLinksArea.Blockchain {
	background-color: #001d42;
}
#InnerLinksArea.AppModernize {
	background-color: #00404d;
}
#InnerLinksArea.AiOcr {
	background-color: #256da9;
}
#InnerLinksArea.DigitalDialogue {
	background-color: #256da9;
}
#InnerLinksArea.ItModernization {
	background-color: #009984;
}
#InnerLinksArea.Genai {
	background-color: #85329A;
}

#InnerLinksArea.SubPage {
	margin-top: -45px;
	margin-bottom: 45px;
}

#InnerLinksArea .HorizontalInnerLinks {
	margin-bottom: 0;
	text-align: center;
}

#InnerLinksArea .HorizontalInnerLinks ul {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	text-align: left;
}

#InnerLinksArea .HorizontalInnerLinks li:last-child {
	margin-right: 0;
}
#InnerLinksArea .HorizontalInnerLinks.Wide li:not(:last-child) {
	margin-right: 35px;
}

#InnerLinksArea .HorizontalInnerLinks li a {
	color: #ffffff;
	background-image: url(/image/jp/r1/icon/icon_link_bottom_white_hd.png);
}
#InnerLinksArea.Gray .HorizontalInnerLinks li a {
	color: #333333;
	background-image: url(/products/it/appsvdiv/image/appsvdiv/icon/icon_link_bottom_gray_hd.png);
}

#DownloadContents #Topics .DateListStyle2 {
	max-width: none;
}

.DateListStyle2.TopicsList dd {
	margin-left: 18em;
}

#DownloadContents .Section .DateListStyle2.TopicsList ul.LinkListStyle1 {
	 margin-left: 0;
}

/* ---[-] フォントサイズ調整他：202108追加-- */
.large-1 {
	font-size: 1rem;
}

.large-2 {
	font-size: 1.125rem;
}

.large-3 {
	font-size: 1.5rem;
}

.small-1 {
	font-size: 0.8125rem;
}

.small-2 {
	font-size: 0.625rem;
}

.RedTxt {
	color: #b1000e !important;
}

.ImgOnlyStyle .ModalYouTubeLink {
	max-width: 100%;
}

/* ---[-] マージン調整：202108追加-- */
.mb0 { margin-bottom: 0 !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !important; }
.mb50 { margin-bottom: 50px !important; }

.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }

.ml0 { margin-left: 0 !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml45 { margin-left: 45px !important; }
.ml50 { margin-left: 50px !important; }

.mr0 { margin-right: 0 !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr45 { margin-right: 45px !important; }
.mr50 { margin-right: 50px !important; }

/* ---[-] デザインガイドラインVer.5対応：202112追加-- */
#HeadersArea { display: none; }

#HeaderArea1 #SupportNavi {
	max-width: calc(100% - 110px);
}

.JS #HeaderArea2 > .Container {
	-ms-flex-align: stretch;
	align-items: stretch;
}

#Popup #Contents {
	padding-bottom: 15px;
}

#Popup #HeaderArea1 .Container,
#Popup #Contents .Container,
#Popup #FooterArea .Container {
	max-width: 100%;
}

/* ---テーブル セルの幅指定--- */

.Wide5Per  { width:  5%; }
.Wide10Per { width: 10%; }
.Wide15Per { width: 15%; }
.Wide20Per { width: 20%; }
.Wide25Per { width: 25%; }
.Wide30Per { width: 30%; }
.Wide35Per { width: 35%; }
.Wide40Per { width: 40%; }
.Wide45Per { width: 45%; }
.Wide50Per { width: 50%; }
.Wide55Per { width: 55%; }
.Wide60Per { width: 60%; }
.Wide65Per { width: 65%; }
.Wide70Per { width: 70%; }
.Wide75Per { width: 75%; }
.Wide80Per { width: 80%; }
.Wide85Per { width: 85%; }
.Wide90Per { width: 90%; }
.Wide95Per { width: 95%; }

/* ---[-] ページトップボタン共通化対応他：202301追加-- */
#FooterArea #FooterPageTop {
	top: -50px;
	z-index: 100;
	background-color: #e00;
}
#FooterArea #FooterPageTop:hover,
#FooterArea #FooterPageTop:active {
	background-color: #f00;
}
#FooterArea #FooterPageTop.Fixed {
	position: fixed;
	top: auto;
	bottom: 10px;
	right: calc(50% - 482.5px);
}
#FooterArea .Container.Wide #FooterPageTop.Fixed {
	right: calc(50% - 637.5px);
}

img.NewMark {
	width: 28px;
	height: auto;
}

span.NewMarkAdd {
	display: none;
}

/* ---[-] サービスページ ダウンロードクラス定義：202503追加-- */
.Section ul li.PdfBK a {
	padding-left: 32px;
	padding-right: 35px;
	font-weight: bold;
	background-image: url(../../image/appsvdiv/common/download_black.png), url(../../../../../image/jp/r1/icon/icon_pdf_hd.gif);
	background-position: left center, right center;
	background-size: auto auto;
}

.Section ul li.PdfWT a {
	padding-left: 32px;
	padding-right: 35px;
	font-weight: bold;
	background-image: url(../../image/appsvdiv/common/download_white.png), url(../../../../../image/jp/r1/icon/icon_pdf_hd.gif);
	background-position: left center, right center;
	background-size: auto auto;
}

.Section ul li.PdfBK a:hover,
.Section ul li.PdfBK a:active,
.Section ul li.PdfWT a:hover,
.Section ul li.PdfWT a:active{
	text-decoration: none;
}


/* for Responsive Web Design
=========================================================================================== */
.ShowTablet, .ShowSD2, .ShowSD1 { display: none; }


/*--- for - 1304px(Wide) ---*/
@media screen and (max-width: 1304px) {
	.OptionWideRWD #InnerLinksArea {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.OptionWideRWD #FooterArea .Container.Wide #FooterPageTop.Fixed {
		right: 15px;
	}
}


/*--- for - 994px ---*/
@media screen and (max-width: 994px) {
	.JS .HideTablet { display: none; }

	.JS .ShowTablet { display: block; }
	.JS br.ShowTablet { display: inline; }

	.JS #FloatContact .GridSet {
		max-width: none;
		margin: 0 auto;
	}
	.JS #FloatContact .GridSet .Grid4 {
		padding-right: 15px;
	}

	.JS #InnerLinksArea {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.JS #FooterArea #FooterPageTop.Fixed {
		right: 15px;
	}
}


/*--- for - 767px ---*/
@media screen and (max-width: 767px) {
	.JS #Contents #example #exampleContents,
	.JS #Contents #LinkArea .BtnArea {
		padding-bottom: 15px;
	}
	.JS #Contents #exampleContents .inlineEx,
	.JS #Contents #LinkArea .Button {
		margin-bottom: 15px;
	}

	.JS #FooterArea #FooterPageTop.Fixed,
	.JS #FooterArea .Container.Wide #FooterPageTop.Fixed {
		right: 0;
	}

	.JS .ResponsiveLinkListStyle ul.LinkListStyle1 li a.InlineLink {
		display: inline;
		margin: 0;
		padding: 0;
	}
	.JS .ResponsiveLinkListStyle ul.LinkListStyle1 li a.InlineLink:hover,
	.JS .ResponsiveLinkListStyle ul.LinkListStyle1 li a.InlineLink:active {
		background-color: transparent;
		text-decoration: underline;
	}
	.JS .ResponsiveLinkListStyle ul.LinkListStyle1 li a.InlineLink:after {
		position: static;
		display: inline-block;
		margin: 0 0 0 1px;
		vertical-align: middle;
	}
}


/*--- for - 579px ---*/
@media screen and (max-width: 579px) {
	.JS .HideSD2 { display: none; }

	.JS .ShowSD2 { display: block; }
	.JS br.ShowSD2 { display: inline; }

	.JS .DateListStyle2.TopicsList dd {
		margin-left: 0;
	}

	.JS #InnerLinksArea.SubPage {
		margin-top: -20px;
		margin-bottom: 35px;
	}
}


/*--- for - 399px ---*/
@media screen and (max-width: 399px) {
	.JS .HideSD1 { display: none; }

	.JS .ShowSD1 { display: block; }
	.JS br.ShowSD1 { display: inline; }

	.JS #Contents #DownloadContents .Section {
		margin-bottom: 35px;
	}

	.JS #Contents #exampleContents > div {
		margin-bottom: 0;
	}

	.JS #InnerLinksArea.SubPage {
		margin-top: -10px;
		margin-bottom: 25px;
	}
}