@charset "shift_JIS";


/* [header] */

div#jp1PageTitleArea1{
	background:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/topBrandingBack.png') no-repeat center;
	background-size:cover;
	height:450px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
	overflow:hidden;
}
div#jp1PageTitleArea1.FeatureTitle3:after{
	content:"";
	display:block;
	background:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/topBrandingIcon.png') no-repeat right center;
	background-size:auto 350px;
	width:1305px;
	height:430px;
	position:absolute;
	bottom:0;
	right:calc(50% - 750.5px);
	z-index:10;
}
div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1{
	width:calc((50% - 482.5px) + 800px);
	margin:0;
	overflow:hidden;
}
div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 div#PageTitleInner{
	display:flex;
	background:rgba(108, 26, 91, 0.4);
	transform:skew(-25deg);
	margin:0 100px 0 -100px;
	padding:30px 0;
	position:relative;
	z-index:11;
}
div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 h1{
	color:#FFF;
	transform:skew(25deg);
	margin-left:calc(50vw - 380.5px);
	box-sizing:border-box;
	font-size:138%;
	padding-right:50px;
}
div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 h1 a{
	pointer-events:none;
	display:block;
	font-size:130%;
	margin-bottom:15px;
	font-weight:bold;
}
div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 h1 span{
	font-size:130%;
	font-weight:bold;
}
div#jp1PageTitleArea1.FeatureTitle3 div#pageTitleSub{
	width:965px;
	margin:0 auto;
	color:#FFF;
	font-weight:bold;
	font-size:90%;
	padding:10px 0;
}
div#jp1PageTitleArea1.FeatureTitle3 div#pageTitleSub p{ margin-bottom:10px; }


/* [InnerLinks] */
section#innerLinkArea{
	background:#4C4C4C;
	padding:0;
}
section#innerLinkArea ul#horizontalInnerLinks{
	width:965px;
	margin:0 auto;
	justify-content:center;
	gap:5px;
	padding:10px 5px;
	box-sizing:border-box;
}
ul#horizontalInnerLinks li{
	flex-grow:1;
}
ul#horizontalInnerLinks li a{
	color:#FFF;
	display:block;
	text-align:center;
	padding:10px 10px 10px 0;
	position:relative;
	font-size: 84%;
}
ul#horizontalInnerLinks li:not(:last-child) a:after{
	content:"";
	display:inline-block;
	border-right:1px solid #FFF;
	position:absolute;
	right:0;
	top:10px;
	height:1.8em;
}
ul#horizontalInnerLinks li a:before{
	content:"▽";
	margin-right:0.2em;
}

/*[preface]*/
div#preface{
	color:#8B60BA;
}

/*[全ブロック共通]*/
h2{
	margin-top: 0;
}

h2 mark{
	display:inline-block;
	color:#FFF;
	background:#8B60BA;
	padding:7px 30px 5px;
	border-radius:1em;
	font-size:85%;
	font-weight:bold;
	line-height:1;
}
h2 span{
	background:none;
	color:#333;
	text-decoration:underline;
}

p.ImgOnlyStyle{ font-size:100%; }
p.ImgOnlyStyle span.Title{
	display:block;
	padding-bottom:10px;
}

div.codeBlock{
	padding:50px 15px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
.FlexWrap{
	gap:10px;
	flex-wrap:wrap;
	justify-content:center;
}
.FlexWrap .flexInner{
	width:calc(33.33% - 7px);
	min-width:300px;
	box-sizing:border-box;
}
.FlexWrap .flexInner dt{
	text-align:center;
	font-weight:bold;
	margin-bottom:10px;
}

.radiusImageWrap{
	padding:20px 50px;
	background:#FFF;
	border-radius:15px;
}
.radiusImageWrap h4{
	color:#8B60BA;
}

section{
	padding:0 0 20px;
}
/*丸付きリスト */
dl.CircleList dt,
ul.CircleList li{
	font-size:90%;
	margin-left:20px;
	text-indent:-20px;
}
dl.CircleList dt:before,
ul.CircleList li:before{
	content:"";
	display:inline-block;
	border-radius:50%;
	margin-right:10px;
	width:10px;
	height:10px;
	background:#8B60BA;
}
dl.CircleList dd{
	font-size:90%;
	margin-left:20px;
	margin-bottom:15px;
}

p.codeText1{ font-size:100%; }


/*[「自動化」を阻んできた、実装・維持・保守の手間とコスト]*/
div#code01Area{
	background:#F4F4F4;
}
div#code01Area h2 mark{
	background:#595959;
}
div#code01Flex dl{
	padding:230px 20px 0;
	background:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/code01Flex01.png') no-repeat center top;
	background-size:100% auto;
}
div#code01Flex dl + dl{
	background-image:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/code01Flex02.png');
}
div#code01Flex dl:last-child{
	background-image:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/code01Flex03.png');
}

div#code01Flex dt{
	color:#737373;
	font-size:120%;
}
div#code01Flex dd{ font-size:90%; }

/*[ Operations as Code×AIによる、自動化工数の削減 ]*/
div#code02Area{
	background:#E6E0EC;
}
div#code02Area h3{
	color:#8B60BA;
	font-size:110%;
	border-bottom:1px solid #8B60BA;
	padding:0 15px 3px;
}
div#code02Area section p.TextStyle1,
div#code02Area section ul.CircleList{
	padding:0 15px;
}

/*[ 確実な実装とメンテナンスを支える技術 ]*/
div#code03Flex dl.flexInner dt{
	color:#8B60BA;
}
div#code03Flex dl{
	padding:230px 25px 0;
	background:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/code03Flex01.png') no-repeat center top;
	background-size:100% auto;
}
div#code03Flex dl + dl{
	background-image:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/code03Flex02.png');
}
div#code03Flex dl:last-child{
	background-image:url('/Prod/comp/soft1/jp1/feature/code_generation_ai/images/code03Flex03.png');
}

/*[ 運用の「実行」と「改善提案」への拡張 ]*/
div#code04Area{
	background:#E6E0EC;
}
div#code04Area h3{
	color:#8B60BA;
	font-size:110%;
}
div#code04Flex{ gap:30px; }
div#code04Flex dl.flexInner{
	width:calc(50% - 15px);
}
div#code04Flex dt{
	font-size:110%;
	color:#8B60BA;
	border-bottom:1px solid #8B60BA;
}
div#code04Flex dd{
	font-size:90%;
}

/*[まとめ]*/
div#code05Area{
	background:#8B60BA;
	color:#FFF;
	text-align:center;
}
div#code05Area h2 span{ color:#FFF; }
div#code05Area h3{
	font-size:120%;
	color:#FFF;
}
div#code05Area dl.CircleList{
	display:inline-block;
	text-align:left;
}
div#code05Area dl.CircleList dt{ font-size:110%; }
div#code05Area dl.CircleList dt strong{ color:#FFF; }
div#code05Area dl.CircleList dt:before{
	background:#FFF;
}
div#code05Area dl.CircleList dd{ font-size:100%; }
div#code05Area div.BoxPatternC{
	border-radius:15px;
	margin: 0 auto 15px;
	max-width:750px;
}
div#code05Area div.BoxPatternC p.TextStyle1{
	color:#8B60BA;
	font-weight:bold;
}

/*[資料ダウンロード]*/
ul.DownloadLinkList li a{
	display:block;
	max-width:700px;
	color:#FFF;
	font-size:110%;
	font-weight:bold;
	background:#8B60BA;
	padding:15px 10px;
	border-radius:2em;
	text-align:center;
	margin:0 auto;
}
ul.DownloadLinkList li a span{
	background:url('/image/jp/r1/icon/icon_link_right_l_white_hd.gif') no-repeat center right;
	padding-right:25px;
	background-size:20px;
}
ul.DownloadLinkList li a span b{
	font-size:120%;
}


/* for - 1200px
=========================================================================================== */
@media screen and (max-width:1200px){
	.JS div#jp1PageTitleArea1.FeatureTitle3:after{
		right:-50px;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1{
		width:90%;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 h1{
		max-width:calc(100vw - 380px);
	}
}

/* for - 994px
=========================================================================================== */
@media screen and (max-width:994px){
	.JS div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 h1{
		margin-left:115px;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3 div#pageTitleSub{
		width:100%;
		box-sizing:border-box;
		padding:10px 15px;
	}
	.JS section#innerLinkArea ul#horizontalInnerLinks{
		width:100%;
	}
}
/* for - 965px
=========================================================================================== */
@media screen and (max-width:964px){
	.JS div#opsi04Area div.BoxPatternC{
		margin: 0 120px 15px;
	}
	ul#horizontalInnerLinks li:not(:last-child) a:after{
		height:3.8em;
	}
}
/* for - 900px
=========================================================================================== */
@media screen and (max-width:899px){
	
}

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

}
/* for - 768px
=========================================================================================== */
@media screen and (max-width:767px){
	.JS div#jp1PageTitleArea1{
		justify-content:normal;
		height:auto;
		padding-bottom:235px;
		z-index:1;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3:after{
		background-size:auto 100%;
		background-position-x:center;
		width:100%;
		height:250px;
		top:auto;
		right:0;
		bottom:0;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1{
		width:100%;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 div#PageTitleInner{
		transform:none;
		margin:50px 0 0;
	}
	.JS div#jp1PageTitleArea1.FeatureTitle3 div.PageTitleStyle1 h1{
		text-shadow:none;
		transform:none;
		margin:0 15px;
		padding:0;
		max-width:none;
	}
	.JS ul#horizontalInnerLinks li:not(:last-child) a{
		border-right:none;
		border-bottom:1px solid #FFF;
		display:block;
	}
	.JS ul#horizontalInnerLinks li:not(:last-child) a:after{
		border-right:none;
	}
	.JS ul#horizontalInnerLinks li a{
		font-size: 100%;
	}
	.JS .FlexWrap{
		display:flex;
		flex-direction:column;
	}
	.JS .FlexWrap .flexInner{
		margin:0 auto 20px;
	}
	.JS div#code01Flex dl,
	.JS div#code03Flex dl{
		padding-top:210px;
	}
	.JS div#code04Flex dl.flexInner{
		width:100%
	}

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

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

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

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


}