@charset "Shift_JIS";

/* カスタムプロパティ
 ***************************/
:root{
	--endpoints:#EE6000;
	--observability:#046C6C;
	--automation:#1A4E8E;
}

/* ブランディングエリア
 ***************************/
div.PageTitleStyle1{
	height:380px;
	padding:30px 0;
	position:relative;
	box-sizing:border-box;
}
div.PageTitleStyle1 p.SubTitle{
	background:#000;
	display:inline-block;
	padding:10px 50px 10px 10px;
	margin-bottom:50px;
	position:relative;
	z-index:49;
}
div.PageTitleStyle1 p.SubTitle strong{
	display:block;
	color:#FFF;
	font-size:110%;
}
div.PageTitleStyle1 p.SubTitle strong:first-child{
	font-size:100%;
	font-weight:normal;
}

div#titleInner{
	margin-left:30px;
	position:relative;
	z-index:49;
}
div.PageTitleStyle1 p.ImgOnlyStyle{
	position:absolute;
	top:0;
	overflow:hidden;
	width:100%;
	max-height:380px;
}

div.PageTitleStyle1 p#categoryMark{
	display:inline-block;
	font-size:85%;
	font-weight:bold;
	color:#FFF;
	padding:10px;
	margin-bottom:20px;
}
div.PageTitleStyle1 h1{
	font-size:215%;
	font-weight:bold;
	color:#FFF;
	text-shadow:2px 2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, -2px -2px 2px #000;
}
div.PageTitleStyle1 h1#threelines{
	line-height: 50px;
}
div.PageTitleStyle1 h1.invertColor{
	color:#000;
	text-shadow:2px 2px 2px #FFF, -2px 2px 2px #FFF, 2px -2px 2px #FFF, -2px -2px 2px #FFF;
}

/* ページ内リンク
 ***************************/
div#InnerLinksArea{
	width:80%;
	margin:0 auto;
}
div.InnerLinksBox{
	border:1px solid #CECECE;
	padding:20px;
	text-align:center;
	margin:0 0 15px;
}
div.InnerLinksBox h2{
	margin:0 0 15px;
	padding:0;
	font-size:140%;
	font-weight:bold;
}
div.InnerLinksBox ul{
	display:inline-block;
	text-align:left;
	margin:0;
}
div.InnerLinksBox ul li{
	line-height: 30px;
}
div.InnerLinksBox ul a{
	font-size:100%;
	font-weight: bold;
	line-height:1.2;
	color:#333;
	text-decoration: underline;
}
p.TextStyle3.ToolsUsed{
	margin-left:2em;
	font-weight: bold;
}
div#InnerLinksArea > p.TextStyle3.ToolsUsed{
	margin-left:0;
	font-weight: bold;
}

/* 記事メイン
 ***************************/
div#articleArea h2{
	font-size:110%;
	font-weight:bold;
	color:#FFF;
	background:#1B1B1B;
	text-align:left;
	padding:10px;
	border-left:5px solid;
}
ol.ListStyle1 li p.ImgOnlyStyle{
	margin-top:10px;
}

/* ページ下部SNSインク
 ***************************/
ul#snsSection{
	display:flex;
	gap:30px;
	justify-content:center;
	margin:0 15px 65px;
	padding-top:75px;
	background:url('/Prod/comp/soft1/jp1/hack/img/endpoint/snsShare.png') no-repeat top center;
	background-size:160px auto;
	margin-top: 30px;
}
ul#snsSection img{
	width:32px;
	height:32px;
}


/* WSUSバナー
 ***************************/
div#wsus_banner_area {
	display: flex;
    justify-content: center;
}

/* 右カラム
 ***************************/
div#RightColumnTop{
	height:380px;
}
/*SNSリンク*/
div#RightColumnTop dl#snsSectionSide{
	display:flex;
}
div#RightColumnTop dl#snsSectionSide{
	justify-content:space-between;
	margin:0 0 25px;
	gap:10px;
}
div#RightColumnTop dl#snsSectionSide dt{
	display:flex;
	flex-direction:column;
	justify-content:center;
	font-size:90%;
	font-weight:bold;
}
div#RightColumnTop dl#snsSectionSide dd{
	flex-grow:1;
}
div#RightColumnTop dl#snsSectionSide dd ul{
	display:flex;
	justify-content:flex-end;
	gap:5%;
}
div#RightColumnTop dl#snsSectionSide dd ul a{
	display:inline-block;
	width:32px;
}
div#RightColumnTop dl#snsSectionSide dd img{
	width:32px;
	height:32px;
}

/*閲覧記事ランキング*/
div#RightColumnTop h2{
	border:double;
	font-size:95%;
	margin:0 0 10px;
	padding:5px 10px;
	font-weight:bold;
}
div#rankingArea a.rankingBox{
	padding:10px 0 10px 35px;
	border-top:1px solid #CECECE;
	position:relative;
	display:block;
	color:#000;
}
div#rankingArea a.rankingBox:hover{
	text-decoration:none;
}
div#rankingArea a.rankingBox:before{
	content:"2";
	display:inline-block;
	width:40px;
	height:40px;
	line-height:1;
	background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #AFABAB 50%);
	position:absolute;
	top:0;
	left:0;
	box-sizing:border-box;
	padding:5px;
	font-weight:bold;
	color:#FFF;
	font-size:14px;
}
div#rankingArea a.rankingBox:first-child:before{
	content:"1";
	background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #E4C562 50%);
}
div#rankingArea a.rankingBox:last-child:before{
	content:"3";
	background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #D36731 50%);
}
div#rankingArea a.rankingBox p.TextStyle2{
	font-size:87%;
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
}
div#rankingArea a.rankingBox:hover p.TextStyle2{
	text-decoration:underline;
}
div#rankingArea a.rankingBox:first-child p.TextStyle2{
	font-weight:bold;
}
div#rankingArea a.rankingBox p.DateStyle{
	font-size:67%;
	text-align:right;
}


/*縦型ローカルナビ*/
div#VerticalLocalNavi{
	font-size:100%;
	position:relative;
	padding-bottom:100px;
}
/*フローティング処理*/
div#VerticalLocalNavi.Fixed{
	top:15px;
	position:fixed;
	max-width:300px;
	padding-right:15px;
}
div#VerticalLocalNavi dt{
	padding:9px 15px;
	background:#D9D9D9;
	font-size:90%;
	font-weight:bold;
	color:#000;
	display:flex;
	justify-content:space-between;
	cursor:pointer;
	position:relative;
	z-index:100;
}
div#VerticalLocalNavi dt:hover,
div#VerticalLocalNavi dt.opened{
	background:#C1C1C1;
}
/*アコーディオン処理*/
div#VerticalLocalNavi dt:after{
	content:"＋";
	font-size:25px;
}
div#VerticalLocalNavi dt.opened:after{
	content:"−";
}
div#VerticalLocalNavi dd{
	height:0;
	overflow:hidden;
	transition: height 0.5s ease;
}
div#VerticalLocalNavi dt.opened + dd{
	height:auto;
}

div#VerticalLocalNavi dd li a,
div#VerticalLocalNavi dd li a:visited,
div#VerticalLocalNavi dd li a:link{
	background:#F2F2F2 url(/image/jp/r1/icon/icon_link_right_disabled_hd.gif) no-repeat center right;
	color:#000;
	font-size:80%;
	padding-right:30px;
}
div#VerticalLocalNavi dd li a:hover{
	background:#b1000e url(/image/jp/r1/icon/icon_link_right_white_hd.gif) no-repeat center right;
	color:#FFF;
}
#VerticalLocalNavi dd li.Current a,
#VerticalLocalNavi dd li.Current a:visited,
#VerticalLocalNavi dd li.Current a:link{
	pointer-events:none;
	background:#F2F2F2;
	padding-right:15px;
}
#VerticalLocalNavi dd li.Current a:link em,
#VerticalLocalNavi dd li.Current a:visited em{
	background:#d9d9d9;
	color:#000;
}

div#VerticalLocalNavi dd li:last-child a em{
	border-bottom:1px solid #FFF;
}

div#VerticalLocalNavi p.ImgOnlyStyle{
	position:absolute;
	bottom:10px;
}
/*
div#VerticalLocalNavi p.ImgOnlyStyle.Fixed{
	position:fixed;
	max-width:300px;
	padding-right:15px;
}
*/

div#VerticalLocalNavi p.ImgOnlyStyle a{
	padding:0px 0px;
	max-width: 300px;
}

div#VerticalLocalNavi p.ImgOnlyStyle img.sp{
	display: none;
}


table ul.ListStyle1{
	font-size:100%;
}

/* 独自番号リスト設定
 ***************************/
ol.ListStyle1.origin01{
	list-style:none;
	counter-reset: number 0;
}
ol.ListStyle1.origin01 li:before{
	counter-increment: number 1;
	content:"【"counter(number)"】";
	margin-right:0.2em;
	text-indent:2.2em;
	margin-left:-2.2em;
}

/*開始番号指定*/
ol.ListStyle1.origin01 li.start-num2{
	counter-increment: number 1;
}
ol.ListStyle1.origin01 li.start-num3{
	counter-increment: number 2;
}
ol.ListStyle1.origin01 li.start-num4{
	counter-increment: number 3;
}
ol.ListStyle1.origin01 li.start-num5{
	counter-increment: number 4;
}
ol.ListStyle1.origin01 li.start-num6{
	counter-increment: number 5;
}
ol.ListStyle1.origin01 li.start-num7{
	counter-increment: number 6;
}
ol.ListStyle1.origin01 li.start-num8{
	counter-increment: number 7;
}
ol.ListStyle1.origin01 li.start-num9{
	counter-increment: number 8;
}

/* 運用始まるまで非表示
 ***************************/
.DisableItem{
	opacity:0;
}
.DisableItem a{
	pointer-events:none!important;
}

dt.clickDisable{
	pointer-events:none!important;
	color:#C1C1C1!important;
}

/* カテゴリカラー設定
 *(カスタムプロパティは最上部に記載)
 ************************************/
/*エンドポイント管理*/
body#jp1Endpoints div.PageTitleStyle1 p#categoryMark{ background:var(--endpoints); }
body#jp1Endpoints div.InnerLinksBox h2,
body#jp1Endpoints div.InnerLinksBox ul a:hover{ color:var(--endpoints); }
body#jp1Endpoints div.InnerLinksBox ul a{ text-decoration-color:var(--endpoints); }
body#jp1Endpoints div#articleArea h2{ border-color:var(--endpoints); }
/*オブザーバビリティ*/
body#jp1observability div.PageTitleStyle1 p#categoryMark{ background:var(--observability); }
body#jp1observability div.InnerLinksBox h2,
body#jp1observability div.InnerLinksBox ul a:hover{ color:var(--observability); }
body#jp1observability div.InnerLinksBox ul a{ text-decoration-color:var(--observability); }
body#jp1observability div#articleArea h2{ border-color:var(--observability); }
/*オートメーション*/
body#jp1automation div.PageTitleStyle1 p#categoryMark{ background:var(--automation); }
body#jp1automation div.InnerLinksBox h2,
body#jp1automation div.InnerLinksBox ul a:hover{ color:var(--automation); }
body#jp1automation div.InnerLinksBox ul a{ text-decoration-color:var(--automation); }
body#jp1automation div#articleArea h2{ border-color:var(--automation); }


/* for - 1304px *wide.css上書き
=========================================================================================== */
@media screen and (min-width: 995px) and (max-width: 1304px){
	.JS #Contents div.PageTitleStyle1 p.ImgOnlyStyle img{
		max-width:none;
		left:50%;
		position:relative;
		transform:translate(-50%);
	}
}
/* for - 994px *wide.css上書き
=========================================================================================== */

@media screen and (max-width: 994px){
	.JS #Contents div.PageTitleStyle1 p.ImgOnlyStyle img{
		max-width:none;
		left:50%;
		position:relative;
		transform:translate(-50%);
	}

	.JS div#VerticalLocalNavi p.ImgOnlyStyle img.pc{
		display: none;
	}

	.JS div#VerticalLocalNavi p.ImgOnlyStyle{
		bottom:-75px;
	}

	.JS div#VerticalLocalNavi p.ImgOnlyStyle img.sp{
		display: block;
	}
	.JS div.Grid3 div.PageTitleStyle1 h1{
	font-size:205%;
	}
}

/* for - 964px
=========================================================================================== */
@media screen and (max-width: 964px){
	.JS div#RightColumnTop dl#snsSectionSide{
		display:block;
	}
	.JS div#RightColumnTop dl#snsSectionSide dt{
		text-align:center;
		margin-bottom:5px;
	}
	.JS div#RightColumnTop dl#snsSectionSide dd ul{
		justify-content:center;
	}
	.JS div.Grid3 div.PageTitleStyle1 h1{
	font-size:195%;
	}
}
/* for - 930px
=========================================================================================== */
@media screen and (max-width: 930px){
	.JS div.Grid3 div.PageTitleStyle1 h1{
	font-size:180%;
	}
}
/* for - 840px
=========================================================================================== */
@media screen and (max-width: 840px){
	.JS div.Grid3 div.PageTitleStyle1 h1{
	font-size:170%;
	}
}
/* for - 780px
=========================================================================================== */
@media screen and (max-width: 840px){
	.JS div.Grid3 div.PageTitleStyle1 h1{
	font-size:164%;
	}
}

/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px){
	.JS div#RightColumnTop dl#snsSectionSide{
		display:none;
	}
	.JS div#RightColumnTop{
		height:auto;
	}
	div#InnerLinksArea{
	width:90%;
	}
	div.InnerLinksBox{
	padding:15px;
	}
	ol.ListStyle1 li p.ImgOnlyStyle{
	margin-right: 20px;
	text-align: center;
	}
/*閲覧記事ランキング復活したら↓はやめるかも*/
	.JS div#rankingWrap{
		display:none;
	}
	div#titleInner{
	margin-left:12px;
	}

	.JS div#VerticalLocalNavi p.ImgOnlyStyle img.pc{
		display: block;
	}

	.JS div#VerticalLocalNavi p.ImgOnlyStyle{
		bottom:10px;
	}

	.JS div#VerticalLocalNavi p.ImgOnlyStyle img.sp{
		display: none;
	}
}

/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px){
	.JS div.Grid3 div.PageTitleStyle1 h1{
	font-size:150%;
	}
	div.PageTitleStyle1 h1#threelines{
	line-height: 40px;
	}
}

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

}