@charset "Shift_JIS";

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

Name: 

Description: 

Create: 2025.07.
Updata: xxxx.xx.xx
Copyright Hitachi, Ltd. 1994, 2025. All rights reserved.

***************************************************** */
/* [-] 幅固定*/
div.Section {
    max-width: 965px;
    margin: 0 auto;
}


.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;margin-bottom: 0 !important;}
.mt10 { padding-top: 10px!important;}
.mt20 { padding-top: 20px!important;}
.mt30 { padding-top: 30px!important;}
.mt40 { padding-top: 40px!important;}


.TextStyle1 { font-size: 95%; }
.TextStyle1 strong { color: #333; }
strong.Annotation{ color:#C00; }


/* [-ブランディング]*/

div.PageTitleStyle3 {
    background:#FFF url(/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/brandingBack.png) no-repeat center;
    height: 330px;
    margin-bottom:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
div.PageTitleStyle3 .BrandingTextArea {
    width:calc((50% - 482.5px) + 965px);
    background:rgba(32, 56, 100, 0.8);
    display:flex;
    justify-content:right;
}
.PageTitleStyle3 h1.BrandingText {
    border-left: none;
    display:inline-block;
    min-width:965px;
    padding:40px 0;
    color:#FFF;
    height:auto;
    font-size:190%;
    font-weight:bold;
}
.PageTitleStyle3 h1.BrandingText a{/*レイアウト調整のため一旦リセット*/
	position:static;
	min-height:auto;
	height:auto;
	pointer-events:none;
}
.PageTitleStyle3 span.BrandingTextsub {
    text-shadow: none;
    height:auto;
    font-size:90%;
    padding:0;
    font-weight:bold;
}

/* [-ページ内リンク]*/

div#mainMenu{
	background:#293E40;
	margin-bottom:25px;
}
div#mainMenu div.contentsWidth{
	width:965px;
	padding:0 15px;
	margin:0 auto;
}
div#mainMenu ul{
	display:flex;
	width:100%;
}

div#mainMenu ul li{
	width:33.3%;
}


div#mainMenu a,
div#mainMenu a:visited{
	color:#FFF;
	font-size:90%;
	display:block;
	padding: 10px 20px 32px;
	/*width: 200px;*/
	text-align:center;
	background:url("/Prod/comp/soft1/jp1/feature/servicenow/images/jp1_icon_link_bottom.png") no-repeat center;
	background-position-y:calc(100% - 7px);
}


/* [-見出し]*/

h2 { 
    background: none;
    padding-bottom: 40px;
    text-align: center;
    font-size: 100%;
    margin: 0; 
}
h2 span{
    display: inline;
    font-size: 190%;
    color: #333;
    text-align: center;
    padding: 0 20px;
    line-height: 170%;
    background:linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, #BDD7EE 60%);
}

/* [-各ブロック共通]*/
section.contentsBlock{
	padding:20px 15px 50px 15px;
}

/* [-JP1のジョブ管理がお客さまに選ばれる理由]*/
section#jobMig01Area{
	background:#DEEBF7;
	padding-top:0;
}
section#jobMig01Area div.Grid4{
	background:url(/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/jobMig01Icon.png) no-repeat right 15px;
	background-size:70px auto;
	padding-top:45px;
}
section#jobMig01Area h2{
	font-weight:bold;
	font-size:190%;
}
section#jobMig01Area h2 span{
	display:block;
	background:none;
	font-size:60%;
	line-height:1.2;
}
section#jobMig01Area div.FlexWrap{
	gap:30px;
}
section#jobMig01Area div.FlexWrap dl{
	background:#FFF;
	padding:20px;
	flex-basis:300px;
	border-radius:30px;
}
section#jobMig01Area div.FlexWrap dl dt{
	text-align:center;
	font-weight:bold;
	font-size:100%;
	padding-bottom:70px;
	border-bottom:10px solid #DEEBF7;
	background:url("/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/jobMig01Back01.png") no-repeat center bottom;
	background-position-y:calc(100% - 5px);
	background-size:auto 50px;
}
section#jobMig01Area div.FlexWrap dl + dl dt{
	background-image:url("/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/jobMig01Back02.png");
}
section#jobMig01Area div.FlexWrap dl + dl + dl dt{
	background-image:url("/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/jobMig01Back03.png");
}
section#jobMig01Area div.FlexWrap dl dd{
	padding:20px 0 0;
	font-size:90%;
}
section#jobMig01Area div#no1GraphArea{
	border:3px solid #fe7e25;
	margin:0 auto;
}
div#no1GraphArea{
	width:50%;
	margin-top: 30px;
}
div#no1GraphArea h2#market_share{
	font-size:130%;
	margin:0;
	line-height:1;
	padding:0;
}
div#no1GraphArea h2#market_share span{
	font-size:100%;
	display:inline-block;
	padding:0 15px;
	background:#FFF;
	color:#ff6102;
	position:relative;
	top:-0.5em;
	line-height:1;
	max-width:80%;
}
div.jobMig01Inner{
	position:relative;
	padding-top:70px;
}
div.jobMig01Inner:before{
	content:"";
	display:inline-block;
	width:600px;
	border:300px solid rgba(255, 255, 255, 0);
	border-top:40px solid #2E75B6;
	border-bottom:40px solid rgba(255, 255, 255, 0);
	box-sizing:border-box;
	position:absolute;
	top:0;
	left:calc(50% - 300px);
}
div.jobMig01Inner p{ font-size:130%; }


/* [-ジョブ管理ツールの移行は、日立にお任せください]*/
ul#jobMig02InnerLink li{
	margin-bottom:15px;
	display:flex;
	border-bottom:1px solid #00789A;
	padding:0 0 10px;
}
ul#jobMig02InnerLink li span,
div.sectionInner h3 span:first-child{
	font-weight:bold;
	font-size:250%;
	color:#00789A;
	padding:5px 15px 0 0;
}
ul#jobMig02InnerLink li a{
	font-size:120%;
	font-weight:bold;
	color:#333;
	flex:1;
}
div.sectionInner{ padding:50px 0 20px; }
div.sectionInner h3{
	position:relative;
	padding-top:70px;
}
div.sectionInner h3 mark{
	position:absolute;
	top:0;
	background:#BD0000;
	color:#FFF;
	font-size:18px;
	font-weight:bold;
	height:50px;
	padding:0 10px;
	border-radius:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	left:3em;
	top:0;
}
div.sectionInner h3 mark:after{
	content:"";
	display:inline-block;
	border:10px solid rgba(255, 255, 255, 0);
	border-right:30px solid #BD0000;
	position:absolute;
	width:10px;
	transform:rotate(-45deg);
	top:50px;
	left:-1em;
}
div.sectionInner h3 mark + span{
	font-size:180%;
	font-weight:bold;
	color:#333;
	line-height:160%;
}
div#jobMig02StepArea{
	background:#DEEBF7;
	padding:50px 30px;
	gap:20px;
}
div#jobMig02StepArea div.flexInner{
	background:#FFF;
	padding:40px 10px 20px;
	position:relative;
}
div#jobMig02StepArea div.flexInner h4{
	position:absolute;
	top:-40px;
	left:-10px;
	font-size:14px;
	background:#FFE699 url("/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/jobMig02Icon.png") no-repeat bottom center;
	background-size:25px auto;
	background-position-y:calc(100% - 5px);
	width:80px;
	height:80px;
	box-sizing:border-box;
	text-align:center;
	padding:10px 0 0;
	border-radius:50%;
	border:1px solid #333;
}
div#jobMig02StepArea div.flexInner dt{
	font-weight:bold;
	text-align:center;
	font-size:110%;
	line-height:1.2;
	margin-bottom:20px;
}
div#jobMig02StepArea div.flexInner dd ul{
	padding:0 20px;
}
ul.checkListStyle2 li{
	color:#2F5597
}
ul.checkListStyle2 li:before{
	border-bottom-color:#2F5597;
	border-right-color:#2F5597;
}

div#jobMig02_03Table table tr th,
div#jobMig02_03Table table tr td{
	text-align:center
}
div#jobMig02_03Table table tr th{
	background:#44546A;
	color:#FFF;
}

.hoverAction:hover{
	opacity:0.7!important;
}

/* [-お問い合わせ（非表示）]*/
.FatMenu, .FatMenuWide, .jp1CategoryIconLink { display:none }







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


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


}

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

	.JS div.PageTitleStyle3 {
	    background:#FFF url(/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/brandingBack_994.png) no-repeat center;
	}

	.JS .PageTitleStyle3 h1.BrandingText{
		font-size:160%;
	}

	.JS div.PageTitleStyle3 .BrandingTextArea{
		width:100%;
	}
	.JS .PageTitleStyle3 h1.BrandingText{
		width:100%;
		min-width:auto;
		padding:40px 20px;
		box-sizing:border-box;
	}
	.JS div#mainMenu div.contentsWidth{
		width:100%;
		box-sizing:border-box;
	}
}


/* for - 835px
=========================================================================================== */
@media screen and (max-width: 835px) {
	.JS section#jobMig01Area h2{
		padding-right:70px;
	}
}


/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {
	.JS div#mainMenu ul{
		flex-direction:column;
	}
	.JS div#mainMenu ul li:not(:last-child){
		border-bottom:1px solid #FFF;
	}
	.JS div#mainMenu ul li{
		margin:0 -15px;
		width:100%;
	}
	.JS div#mainMenu a, .JS div#mainMenu a:visited{
		padding:10px 30px 42px;
		background-position-y:calc(100% - 17px);
	}
	.JS div.jobMig01Inner{
		padding-top:50px;
	}
	.JS div.jobMig01Inner::before {
		width:300px;
		border-width:150px;
		border-top-width:30px;
		border-bottom-width:30px;
		left:calc(50% - 150px);
	}
	.JS .FlexWrap{
		display:flex;
		flex-direction:column;
	}
	.JS div#jobMig02StepArea{
		gap:50px;
	}
}


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

	.JS div.PageTitleStyle3 {
	    background:#FFF url(/Prod/comp/soft1/jp1/feature/automation/jp1_job_migration/images/brandingBack_sp.png) no-repeat center;
}

	.JS .PageTitleStyle3 h1.BrandingText{
		font-size:130%;
	}
}


/* for - 579px
=========================================================================================== */
@media screen and (max-width: 415px){
	.JS div.PageTitleStyle3 h1 span{
		font-size:100%;
	}
}


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