@charset "utf-8";


/*
*	Title: SCSK サービス詳細用
*	URI: 
*	Last Modified: 
*	Description: メインカラム（サービス詳細内容）
*/

/* 製品ラインアップページ********************************/

#procera a.d-table:hover{
text-decoration:none!important;
opacity:.7;
}

#procera .border-01{
color:#8a5d8f;
border:2px solid #8a5d8f;
border-radius:20px;
padding:10px;
}
#procera a.border-01:hover {
background-color:#8a5d8f;
color:#fff!important;
}

#procera .border-02{
color: #7b2;
border:2px solid #7b2;
border-radius:20px;
padding:10px;
}
#procera a.border-02:hover {
background-color:#7b2;
color:#fff!important;
}

#procera .border-03{
color: #0ae;
border:2px solid #0ae;
border-radius:20px;
padding:10px;
}
#procera a.border-03:hover {
background-color:#0ae;
color:#fff!important;
}

#procera .light-purple{
color:#8a5d8f;
}
#procera .d-table{
display:table;
}
#procera .d-tablecell{
display:table-cell;
vertical-align:middle;
}

#procera li span.mark.lightpurple80 i:before, #procera i.light-purple80:before {
    font-size: 80%;
    color: #8a5d8f;
}
#procera li span.mark.lightgreen80 i:before {
    font-size: 80%;
    color: #7b2;
}
#procera li span.mark.lightblue80 i:before {
    font-size: 80%;
    color: #0ae;
}


/*機器仕様ページ********************************/

#procera h3.al,
#procera h3.mpe,
#procera h3.ids,
#procera h3.di,
#procera h3.el{
  position: relative;
  padding: 0 0 0 60px;
    font-size: 22px;
    font-weight: normal;
  }
#procera h3.al:before{
  position: absolute;
  top: 5px;
  left: 0;
  content: url(../img/composition_img01.png);
}
#procera h3.mpe:before{
  position: absolute;
  top: 5px;
  left: 0;
  content: url(../img/composition_img02.png);
}
#procera h3.ids:before{
  position: absolute;
  top: 5px;
  left: 0;
  content: url(../img/composition_img03.png);
}
#procera h3.di:before{
  position: absolute;
  top: 5px;
  left: 0;
  content: url(../img/composition_img04.png);
}
#procera h3.el:before{
  position: absolute;
  top: 5px;
  left: 0;
  content: url(../img/composition_img05.png);
}
#procera table.dataTable-specification{
    margin-bottom: 0.2em;
    line-height: 1.6em !important;
    width: 980px;
}
#procera table.dataTable-specification tr th,
#procera table.dataTable-specification tr td{
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
padding: 1em 0.8em;
border-bottom: 1px solid #BFBFBF;
border-top: 1px solid #BFBFBF;
}
#procera table.dataTable-specification tr th{
background-color: #F1F1F1;
font-weight: bold;
}
#procera table.dataTable-specification tr td.border-none{
border:none;
text-align:center;
}
#procera table.dataTable-specification tr th.border-left,
#procera table.dataTable-specification tr td.border-left{
border-left:1px solid #BFBFBF!important;
}
#procera .align-items-flex-end{
align-items:flex-end;
}
#procera a.flex-btn-zoom:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900!important;
    content: "\f00e";
    margin-right: 3px;
}
#procera .height240{
height:240px;
}



@media screen and (max-width:767px) and (min-width:1px) {
#procera .d-tablecell{
display:inline-block;
}
}




/*
#index h4.index01 {
width: 518px;
height: 24px;
background: url(../img/con_stit07.gif) no-repeat left top;
text-indent: -10000em;
}
#index h4.index02 {
width:518px;
height: 24px;
background: url(../img/con_stit01.jpg) no-repeat left top;
text-indent: -10000em;
margin-bottom: 15px;
}
#index h5 {
color: #006699;
font-weight: bold;
}
#index .dotlineTop {
width: 100%;
margin-top: 10px;
padding: 5px 0;
background: url(../img/dotline.gif) repeat-x top;
}
#index .dotlineBtm {
width: 100%;
margin-bottom: 10px;
padding: 5px 0;
background: url(../img/dotline.gif) repeat-x bottom;
}
#index dt {
float: left;
width: 7em;
color: #333399;
padding-bottom: 10px;
clear: both;
}
#index dd {
width: 475px;
margin-left: 7em;
padding-bottom: 10px;
}

#composition h4.com01 {
width:518px;
height: 24px;
background: url(../img/con_stit02.jpg) no-repeat left top;
text-indent: -10000em;
margin-bottom: 15px;
}
#composition .fLeft {
width: 180px;
float: left;
}
#composition .fLeft p { width: 160px; }
#composition .sec01 h5 {
width: 160px;
color: #ff0000;
font-weight: bold;
margin-bottom: 15px;
}
#composition .sec01 h6 {
width: 160px;
color: #ff0000;
font-weight: bold;
}
#composition .sec02 h5 {
width: 160px;
color: #ff6600;
font-weight: bold;
margin-bottom: 15px;
}
#composition .sec02 h6 {
width: 160px;
color: #ff6600;
font-weight: bold;
}
#composition .sec03 h5 {
width: 160px;
color: #800000;
font-weight: bold;
margin-bottom: 15px;
}
#composition .sec03 h6 {
width: 160px;
color: #800000;
font-weight: bold;
}

#network h4.net01 {
width:518px;
height: 24px;
background: url(../img/con_stit03.jpg) no-repeat left top;
text-indent: -10000em;
margin-bottom: 15px;
}
#network h5 {
font-size: 1.2em;
font-weight: bold;
text-align: center;
color: #006699;
margin: 10px 0;
}
#network p.expension { margin-left: 230px; }

#gui .fLeft {
width: 250px;
float: left;
}
#gui h4 {
width:518px;
height: 24px;
background: url(../img/con_stit04.jpg) no-repeat left top;
text-indent: -10000em;
margin-bottom: 15px;
}
#gui h5 {
font-weight: bold;
text-align: center;
color: #006699;
margin: 5px 0;
}
#gui p.expension { margin-left: 75px; }

#spec h4 {
width:518px;
height: 24px;
background: url(../img/con_stit05.jpg) no-repeat left top;
text-indent: -10000em;
margin-bottom: 15px;
}
#spec h5 {
color: #006699;
font-weight: bold;
margin: 5px 0;
}
#spec table.graph {
width: 99%;
border-collapse: collapse;
margin-bottom: 40px;
}
#spec table.graph th {
background: #bc574b;
font-weight: bold;
text-align :left;
color: #fff;
border: 1px solid #999;
padding: 7px 5px;
}
#spec table.graph td {
background: #fff;
border: 1px solid #999;
padding: 7px 5px;
vertical-align: top;
}
#spec table.graph td.title {
background: #ddd;
}
#spec .fLeft {
width: 260px;
float: left;
}
#spec .fRight {
width: 160px;
float: right;
}

#contact h4 {
width:518px;
height: 24px;
background: url(../img/con_stit06.jpg) no-repeat left top;
text-indent: -10000em;
margin-bottom: 15px;
}
#contact h5 {
color: #006699;
font-weight: bold;
margin: 10px 0;
}
#contact .bgBtm {
display: block;
width: 378px;
height: 18px;
background: url(../img/bgBtm.gif) no-repeat left top;
margin-left: 90px;
}
#contact .bgTop {
display: block;
width: 378px;
height: 18px;
background: url(../img/bgTop.gif) no-repeat left top;
margin-left: 90px;
}
#contact .bgCenter {
width: 378px;
background: url(../img/bgCenter.gif) repeat-y left;
padding: 10px;
margin-left: 90px;
}
#contact .bgCenter p { font-size: 1.2em; text-align: center; }
*/