@charset "UTF-8";

/* MNPメーカートップ改修の為設置 */


/* 下矢印部分 */
#mainContents .fl-jc {
    justify-content: center;
}
#mainContents .fl {
    display: flex;
}

#mainContents .fillArrow {
    width: 40px;
    height: 34.6px;
    border-top: 34.6px solid #cdd0d4;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}

/* セミナーの不要な装飾を削除 */
#mainContents .eventBox .imageBox a::after{display:none;}

/* 追加CSS 2024-07-16 */
#mainContents a.boxlink[target="_blank"] .titlebox.linkvector2{
    background-image: url(/assets/images/element-list/icon/window_wht.png);
    background-size: auto 45%;
}

/* ネットワーク配色を定義 */
#mainContents .fillArrow.color_nw {
    border-top-color: #4562C6;
	opacity: 0.8;
}
#mainContents .boxlink .titlebox.bg_nw{
    background-color: #4562C6;
}
#mainContents .mainContents_innerBlock .button.action01.bg_nw i {
    background-image: url(/assets/images/top/icon-btn-nw.svg);
    background-color: #f2f3f5;
}
#mainContents .mainContents_innerBlock .button.action01.bg_nw:before {
    background-color: #4562C6;
    background-image: linear-gradient(135deg, #4562C6 0%, #368DCC 100%);
}
#mainContents .mainContents_innerBlock .button.action01.bg_nw:after {
    background-color: #4562C6;
    background-image: linear-gradient(45deg, #4562C6 0%, #368DCC 100%);
}

/* セキュリティ配色を定義 */
#mainContents .fillArrow.color_sec {
    border-top-color: #674DBF;
	opacity: 0.8;
}
#mainContents .boxlink .titlebox.bg_sec{
    background-color: #674DBF;
}
#mainContents .mainContents_innerBlock .button.action01.bg_sec i {
    background-image: url(/assets/images/top/icon-btn-sec.svg);
    background-color: #f2f3f5;
}
#mainContents .mainContents_innerBlock .button.action01.bg_sec:before {
    background-color: #674DBF;
    background-image: linear-gradient(135deg, #674DBF 0%, #505CC4 100%);
}
#mainContents .mainContents_innerBlock .button.action01.bg_sec:after {
    background-color: #674DBF;
    background-image: linear-gradient(135deg, #674DBF 0%, #505CC4 100%);
}


/* DX配色を定義 */
#mainContents .fillArrow.color_dx {
    border-top-color: #8ab745;
	opacity: 0.8;
}
#mainContents .boxlink .titlebox.bg_dx{
    background-color: #8ab745;
}
#mainContents .mainContents_innerBlock .button.action01.bg_dx i {
    background-image: url(/assets/images/top/icon-btn-dx.svg);
    background-color: #f2f3f5;
}
#mainContents .mainContents_innerBlock .button.action01.bg_dx:before {
    background-color: #8ab745;
    background-image: linear-gradient(225deg, #8ab745 0%, #788b1e 100%);
}
#mainContents .mainContents_innerBlock .button.action01.bg_dx:after {
    background-color: #8ab745;
    /*background-image: linear-gradient(135deg, #85BE2F 0%, #B4CF2A 100%);*/
    background-image: linear-gradient(225deg, #8ab745 0%, #788b1e 100%);
}

/* AI配色を定義 */
#mainContents .fillArrow.color_af {
    border-top-color: #cb3133;
	opacity: 0.8;
}
#mainContents .boxlink .titlebox.bg_af{
    background-color: #cb3133;
}
#mainContents .mainContents_innerBlock .button.action01.bg_af i {
    background-image: url(/assets/images/top/icon-btn-af.svg);
    background-color: #f2f3f5;
}
#mainContents .mainContents_innerBlock .button.action01.bg_af:before {
    background-color: #cb3133;
    background-image: linear-gradient(135deg, #cb3133 0%, #e93e69 100%);
}
#mainContents .mainContents_innerBlock .button.action01.bg_af:after {
    background-color: #cb3133;
    background-image: linear-gradient(135deg, #cb3133 0%, #e93e69 100%);
}

/* CPSセキュリティ配色を定義 */
#mainContents .fillArrow.color_is {
    border-top-color: #a53bad;
	opacity: 0.8;
}
#mainContents .boxlink .titlebox.bg_is{
    background-color: #a53bad;
}
#mainContents .mainContents_innerBlock .button.action01.bg_is i {
    background-image: url(/assets/images/top/icon-btn-ppl.svg);
    background-color: #fbe0f8; /*矢印の背景色 */
}
#mainContents .mainContents_innerBlock .button.action01.bg_is:before {
    background-color: #a53bad;
    background-image: linear-gradient(135deg, #a53bad 0%, #da66cd 100%);
}
#mainContents .mainContents_innerBlock .button.action01.bg_is:after {
    background-color: #a53bad;
    background-image: linear-gradient(135deg, #a53bad 0%, #da66cd 100%);
}



/* -----Start ページ内リンク----- */
#inPageLinkWrapper {
display: flex;
flex-wrap:wrap;
justify-content: center;
margin-left: -10px;
width: calc(100% + 20px);
}
#mainContents .inPageLinkInner{
margin-left: 10px;
margin-right: 10px;
width: calc((100% / 5) - 20px);
}
#mainContents .inPageLinkInner .button.action01 {
display: block;
padding: 1rem;
min-width: 100%;
min-height: 45px;
}

#mainContents .inPageLinkInner a:after {
display:none;
}
#mainContents .inPageLinkInner .button.action01 .inPageLinkName {
display: block;
width: 100%;
color: #fff;
line-height: 1;
white-space: nowrap;
}
#mainContents .inPageLinkInner .button.action01 .inPageLinkIcon {
margin-top: 2px;
line-height: 1;
}
#mainContents .inPageLinkInner .button.action01 .inPageLinkIcon img {
width: 12px;
height: auto;
}

/* -----END ページ内リンク----- */

/* -----Start テーブル＋画像２カラム----- */
#mainContents .table-column_2 {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
}

#mainContents .table-column_2 > .fig_area{
    width: 40%;
    box-sizing: border-box;
    padding-left: 15px;

}

#mainContents .table-column_2 .fig_area .fig_box{
    border: solid 1px #DDD;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    display: inline-block;
    width: auto;
}


#mainContents .table-column_2 > .tbl_area{
    width: 60%;
    box-sizing: border-box;
    padding-right: 15px;

}
/* -----END テーブル＋画像２カラム----- */


/* -----Start オンデマンド一覧のタグ部分----- */
#mainContents .tag-area{
    padding: 15px 7.5px;
    border-top: solid 1px #CCC;
}
#mainContents .border-icon-folder_ppl.no-icon {
    padding-left:1em;
    display: inline-block;
}
#mainContents .tag-area .border-icon-folder_ppl.no-icon:before,
#mainContents .tag-area .border-icon-folder_ppl.no-icon:after{
    content:none;
}
/* -----END オンデマンド一覧のタグ部分----- */

/* --------------------- */
/*      iPad(768px)      */
/* --------------------- */
@media only screen and (max-width: 768px){
	#mainContents .inPageLinkInner{
		width: calc((100% / 3) - 20px);
	}
	#mainContents .inPageLinkInner .button.action01 {
		padding: 1.5rem 1rem;
	}
	#mainContents .inPageLinkInner .button.action01 .inPageLinkIcon {
		margin-top: 0;
	}
	#mainContents .inPageLinkInner .button.action01 .inPageLinkIcon img {
		width: 20px;
	}

    /* -----Start テーブル＋画像２カラム----- */
    #mainContents .table-column_2 {
        display: block;
    }

    #mainContents .table-column_2 > .fig_area{
        width: 100%;
        padding-left: 0;

    }

    #mainContents .table-column_2 > .tbl_area{
        width: 100%;
        padding-right: 0;

    }
    /* -----END テーブル＋画像２カラム----- */

    /* -----Start ボタンレイアウト追加----- */
    #mainContents .mainContents_innerBlock .bt-column_2 a{width: 100%;}
    #mainContents .mainContents_innerBlock .bt-column_2 a:not(:last-of-type){margin-bottom: 10px;}
    /* -----END ボタンレイアウト追加----- */

}
/* --------------------- */
/*      iPad(480px)      */
/* --------------------- */
@media only screen and (max-width: 480px) {
	#inPageLinkWrapper {
		margin-left: -5px;
		width: calc(100% + 10px);
	}
	#mainContents .inPageLinkInner{
		margin-left: 5px;
		margin-right: 5px;
		width: calc((100% / 3) - 10px);
	}
	#mainContents .inPageLinkInner .button.action01 {
		padding: 1rem;
	}
	#mainContents .inPageLinkInner .button.action01 .inPageLinkIcon {
		margin-top: 2px;
	}
	#mainContents .inPageLinkInner .button.action01 .inPageLinkIcon img {
		width: 12px;
	}

}

/* --------------------- */
/*    事例ロゴ部分追記   */
/* --------------------- */

.case-logo_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
  
.case-logo_wrap .case-logo-item_outer{
    padding: 16px 8px;
    max-width: 200px;
    height: 100px;
    margin: 0 16px;
}
  
.case-logo_wrap .case-logo-item_outer > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
}


/* ロゴスライダー部分 */

.logo-slider {
    position:relative;
    width: 100%;
    height: auto;
    min-height: 120px;
    overflow: hidden;
}

.logo-sliderWrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items:center;
}

.logo-sliderInner {
    float: left;
    height: auto;
}


.logo-sliderCenter {
    float: left;
    padding: 16px 32px;
    width: 200px;
    max-width: 200px;
    height: 100px;
    box-sizing: border-box;
    text-align: center;
}

 
.logo-sliderCenter > img{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
    vertical-align: middle;
}


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

    .case-logo_wrap {
        display: flex;
        justify-content: center;
    }

    .logo-sliderCenter img {
        max-height: 50px;
    }
}

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

    .case-logo_wrap .case-logo-item_outer {
        padding: 16px 8px;
        max-width: 115px;
    }

}