@charset "utf-8";

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

Name: 

日立「帳票認識サービス」：コラムページCSS

Create: 2022.03.14
Updata: 2024.01.
Copyright Hitachi, Ltd. 2024. All rights reserved.

***************************************************** */
/* [-] 全体*/

.anchor{
padding-top: 100px;
margin-top: -100px;
display: block;
}

.Aiocr_column{
padding-bottom: 50px;
}

.Aiocr_column *{
box-sizing: border-box;
}

.Aiocr_column sup{
font-size: 67%;
}

.Aiocr_column .mgb-20{
margin-bottom: 20px!important;
}

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

.Aiocr_column .mgb-50{
margin-bottom: 50px!important;
}

.Aiocr_column .img-box,
.Aiocr_column .img-box-s,
.Aiocr_column .img-box-m{
text-align: center;
}

.Aiocr_column .img-box img{
width: 100%;
height: auto;
margin-bottom: 1em;
}

.Aiocr_column .img-box-s img{
max-width: 500px;
width: 100%;
height: auto;
margin-bottom: 1em;
}

.Aiocr_column .img-box-m img{
max-width: 700px;
width: 100%;
height: auto;
margin-bottom: 1em;
}

.Aiocr_column .inner{
max-width: 994px;
width: 100%;
margin: 0px auto 0px auto;
}

.Aiocr_column .textarea{
width: 90%;
margin: auto;
}

.Aiocr_column h1{
font-size: 130%;
font-weight: bold;
color: #000;
box-sizing: border-box;
margin-left: 0;
}

.Aiocr_column h2{
font-size: 120%;
font-weight: bold;
background-image: none;
color: #000;
box-sizing: border-box;
margin-left: 0;
padding: 0;
}

.Aiocr_column h3{
font-size: 110%;
font-weight: bold;
background-image: none;
color: #000;
box-sizing: border-box;
margin-left: 0;
}

.Aiocr_column .ttl-style-a{
border-left: solid 6px #D21A0A;
padding-left: 1em;
margin-bottom: 1em;
}

.Aiocr_column .ttl-style-b{
border-left: solid 6px #ccc;
padding-left: 1em;
margin-bottom: 0.5em;
}

.Aiocr_column .ttl-style-c{
margin-bottom: 0;
}

.Aiocr_column ul li,
.Aiocr_column ol li{
margin-bottom: 1em;
}

.PageTop{
position: static;
bottom: 0px;
right: 0px;
margin: 0px;
padding: 0px
}

.PageTop li{
background-color: transparent;
display: inline-block;
padding: 5px 20px;
border-radius: 0;
}

.AnnotationsStyle1 a span{
	color:#000;
}

.Hanging {
	display: block;
	margin-left: 1em;
	text-indent: -1em;
}

/*------リンク色-----*/
#Contents a:link {
	color: #005da6;
}

#Contents a:visited {
	color: #551a8b;
}

#Contents a:hover,
#Contents a:active {
	color: #b1000e;
}


/* [-デザイン適用]
=========================================================================================== */

/*Aiocr_column_header*/

#Aiocr_column_header{
border-top: solid thin #fff;
}


/*Aiocr_column_Area1*/
#Aiocr_column_Area1{
/*margin-top: 30px;*/
padding-top: 30px;
}

#Aiocr_column_Area1.Aiocr_column{
margin-bottom: 0;
}

/*content-index*/

#content-index .inner{
font-size: 90%;
text-align: center;
}

#content-index .local-nav{
background-color: #eee;
border-radius: 10px;
padding: 20px 40px;
display: inline-block;
margin: auto;
text-align: left;
}

#content-index .local-nav ul{
margin-left: 1em;
}

#content-index .local-nav ul li {
list-style: disc;
}

#content-index .local-nav ul li span{
	font-size:85%;
}

/*Aiocr_column_Area4*/

#Aiocr_column_Area4 ol li{
margin-bottom: 1em;
}

/*Aiocr_contact*/

#Aiocr_contact{
margin-bottom: 100px!important;
padding-bottom: 30px!important;
}

/*Aiocr_column_documents*/

#Aiocr_column_documents .List{
color: #333!important;
}


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


/* for 1305px -
=========================================================================================== */

@media screen and (min-width: 1305px) {
}


/* for 995px - 1304px
=========================================================================================== */

@media screen and (min-width :995px) and (max-width: 1304px) {

}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
	.JS #Contents {
		overflow: hidden;
	}

	.JS #Contents > .GridSet {
		max-width: 995px;
		margin-right: -15px;
	}

	.JS #Contents > .GridSet > .Grid4 {
		max-width: 965px;
		margin: 0 auto;
		padding-left: 0;
	}

	.JS .Aiocr_column h1,
	.JS .Aiocr_column h2 {
		margin-right: 15px;
	}

	.JS #Contents .Aiocr_column .img-box-s img{
		max-width: 500px;
		width: 100%;
	}

	.JS #Contents .Aiocr_column .img-box-m img{
		max-width: 700px;
		width: 100%;
	}

	.JS .PageTop {
		display: none;
	}
}
/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
	.JS .ResponsiveLinkListStyle {
		margin: 0;
	}

	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle1 li a:link,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle2 li a:link,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle5 li a:link,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle6 li a:link,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle1 li a:visited,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle2 li a:visited,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle5 li a:visited,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle6 li a:visited,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle1 li a:hover,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle2 li a:hover,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle5 li a:hover,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle6 li a:hover,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle1 li a:active,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle2 li a:active,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle5 li a:active,
	.JS #Contents .ResponsiveLinkListStyle ul.LinkListStyle6 li a:active {
		color: #333;
	}
}
/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {
	#Aiocr_column_Area1{
	padding-top: 15px;
	}
}
/* for - 399px
=========================================================================================== */

@media screen and (max-width: 399px) {
	#Contents {
		font-size: 90%;
	}
}