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

.GridSet {
	width: 100%;
}

.mb10 { padding-bottom: 10px!important;}
.mb15 { padding-bottom: 15px!important;}
.mb20 { padding-bottom: 20px!important;}
.mb30 { padding-bottom: 30px!important;}
.mb40 { padding-bottom: 40px!important;}
.mt10 { padding-top: 10px!important;}
.mt20 { padding-top: 20px!important;}
.mt30 { padding-top: 30px!important;}
.mt40 { padding-top: 40px!important;}

.gray-bk {background-color: #f2f2f2!important;}
.notes {font-size: 83%!important;}


#area_content {font-size: 100%;}

#area_content .area_content_pad .PageTitleStyle1 {
	width: 100%;
    max-width: 1700px;
    height: 120px;
    background-image: url(/products/it/harmonious/cloud/articles/microservices/images/top_img_bk.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	margin: 0 auto 25px;
    border-bottom: none;
}

.PageTitleStyle1 h1 {
	text-align: center;
    padding-top: 50px;
    color: #000;
    font-weight: bold;
}

div.HorizontalInnerLinks {
    text-align: center;
    font-size: 100%;
}

div.HorizontalInnerLinks p {
    display: inline-block;
    text-align: center;
    margin: 0 5px;    
}
div.HorizontalInnerLinks p a {
    background-image: url(/image/jp/r1/icon/icon_link_bottom_hd.gif);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 18px;
}

div.HorizontalInnerLinks p a:link {
    color: #c02;
}

.Inner {
	max-width: 995px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.side-pad {padding: 0 2%;}

.bg_textarea .Inner {
    padding: 2%;
}

.bg_textarea .Inner h2 {
    font-size: 170%;
    font-weight: bold;
    text-align: center;
    color: #17375E;
    margin-bottom: 40px;
    position: relative;
}

.bg_textarea .Inner h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 100px;/*線の長さ*/
  height: 3px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #b7dee8;/*線の色*/
  border-radius: 2px;/*線の丸み*/    
}

.bg_textarea .Inner p {
    line-height: 160%;
    font-size: 100%;
}

sup { font-size: smaller; }

dl.AdditionalNotesStyle2 dd { margin: -1.55em 0 3px 1.2em;}

.img-flex {
    display: flex;
    justify-content: space-around; 
    flex-wrap: wrap;
}
.img-flex img {
    display: inline-block;
    margin: 15px 5px ;
}
.img-flex:after{
  content:"";
  display: block;
  width:30%;
}
.elem_pagetop_pad li {font-size: 90%;}

.bg_textarea .Inner h3 {
    font-size: 150%;
    padding-left: 10px;
    line-height: 1.5;
    border-left: solid 6px #b1000e;}

.bg_textarea .Inner ol {margin-left: 2em;}

.bg_textarea .Inner ol li {
    counter-increment: cnt;
    }
.bg_textarea .Inner ol li::before {
    content: "(" counter(cnt) ") ";
    display: inline-block;
    margin-left: -2em;
    width: 2em;}
    
.bg_textarea .Inner .LinkListStyle1 li {padding: 0}

.bnlink a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 70%;
	height: 70px;
	background-color: #b1000e;
	margin-left: auto;
    margin-right: auto;
    font-size: 136%;
	transition: 0.3s;
}

.bnlink a:link,
.bnlink a:visited,
.bnlink a:hover,
.bnlink a:active {
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
}

.bnlink a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
/*	border-color: #fff; */
}

.bnlink a:hover {
	border: 1px solid #333;
}

.bnlink a:hover::after {
	border-color: #f2f2f2 #f2f2f2 transparent transparent;
}

.img_2set {
	display: flex !important ;
	justify-content:center;
	flex-wrap: wrap;
	margin-top: 20px;
	margin-bottom: 20px;
}

.img_2set_item img{
}

.img_logo_right{
	width: 930px;
}

.ThumbW180SetStyle dl.LinkListStyle2 {
	font-size: 100%;
}
.ThumbW180SetStyle dl.LinkListStyle2 strong {
	font-weight: bold;
}
.ThumbW180SetStyle p.Img img {
	max-width: 100% !important;
}

ul li.ButtonStyle1 a:link, 
ul li.ButtonStyle1 a:visited {
	font-size: 120%;
	color: #fff;
	padding-left: 50px;
	padding-right: 50px;
	margin-bottom: 20px;
	background-color: #2B4C5F;
}

ul li.ButtonStyle1 a:hover {
	color: #fff;
	text-decoration:none;
	padding-right: 52px;
	opacity: 0.75;
}
p.TextStyle2 { font-size: 83% !important; }


/*----------------------------------------------
    994px以下に適用
-----------------------------------------------*/

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

	.JS .GridSet {
    max-width: 994px;
    margin: 0;
	}
	.JS .Grid4 {
		padding: 0;
	}
	.JS #area_content, .JS #area_content_main {
		max-width: 994px;
	}    
	.JS .Inner {
		width: 100%;
	}
	.JS h2 {
		margin: 0 0 5px;
	}
	.JS .PageTitleStyle1 {
		width: 100%;
		margin-left: 15px;
		margin-right: 15px;
	}
	.JS .AdditionalNotesStyle2 {
		margin-left: 0;
	}
	.JS .img_logo_right{
		width: auto;
	}

	.JS #Contents .elem_pic .pic_holder img { width: 100%;}    
    
}

/*----------------------------------------------
    767px以下に適用
-----------------------------------------------*/

@media screen and (max-width: 767px) {
	.JS .PageTitleStyle1 h1 {
		font-size: 160%;
	}
	.JS .bnlink a {
	width: 100%;
	}




}

/*----------------------------------------------
    579px以下に適用
-----------------------------------------------*/

@media screen and (max-width: 579px) {

.JS .PageTitleStyle1 h1 {font-size: 4.2vw;}
.JS .bnlink a {font-size: 110%;}
    
.kanren-svc .TableStyle1 td {display: block;}
    
.kanren-svc .TableStyle1 tr:not(:first-child) td {border-top: none;}       
.kanren-svc .TableStyle1 .border-none-579 {border-top:none; }
}

/*----------------------------------------------
    502px以下に適用(適用事例のフレックスボックス用)    
-----------------------------------------------*/
@media screen and (max-width: 502px) {

.img-flex::after {display: none;}

}

/*----------------------------------------------
    399px以下に適用
-----------------------------------------------*/

@media screen and (max-width: 399px) {

.JS .bnlink a {font-size: 4vw;}
}