@charset "utf-8";


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

#careplus .box_item,#careplus .box_arrow {
    align-items:center;
    justify-content:center;
    font-size:180%!important;
}
#careplus .box_item {
    text-align: center !important;
    border: 1px solid #F3F3F3;
    border-radius: 7px;
    padding: 0.3em 0.5em 0.2em 0.5em;
    width: 270px !important;
    /*background-color: #007aff !important;*/
    background: -moz-linear-gradient(top, #280AA6, #B6D1FC);
    background: -webkit-linear-gradient(top, #280AA6, #B6D1FC);
    background: linear-gradient(to Top, #280AA6, #B6D1FC);
    border-color: #000 !important;
    color:white;
}

#careplus .box_arrow {
    width: 80px !important;
    padding-left:5px;
}
#careplus .arrow {
  display:inline-block;
  height:20px;
  width:40px;
  background-color:green;
  position:relative;
  top:10px;
}
#careplus .arrow:before {
  position:absolute;
  content:"";
  width:0;
  height:0;
  border:20px solid transparent;
  border-left:30px solid green;
  left:40px;
  top:-10px;
}

/*お知らせのカテゴリの色定義*/
/* デフォルトよりフォントサイズを大きくするため変更箇所だけ微調整 */
#careplus .icn {
  width: 7.5em;
  font-size: 12px;
}
#careplus .ttl-List li .icn {
  top: 55%;
}

/* 
YAMAHA：紫、Fortinet：赤、A10：水色、Paloaltoオレンジ
Juniper：緑、PicoCELA：青、MasterPro：白、お知らせ：黄色*/
#careplus .icn-yamaha {
  background-color: RGB(112,48,160);
  border: 2px solid RGB(112,48,160);
}
#careplus .icn-fortinet {
  background-color: RGB(229,43,29);
  border: 2px solid RGB(229,43,29);
}
#careplus .icn-paloalto {
  background-color: RGB(255,192,0);
  border: 2px solid RGB(255,192,0);
  color:black;
}
#careplus .icn-a10 {
  background-color:RGB(0,176,240) ;  /*RGB(0,97,174)*/
  border: 2px solid RGB(0,176,240);
}
#careplus .icn-juniper {
  background-color: green;
  border: 2px solid green;
}
#careplus .icn-picocela {
  background-color: RGB(0,112,192); /*RGB(8,59,112)*/
  border: 2px solid RGB(0,112,192);
}
#careplus .icn-masterpro {
  background-color: #ffffff;
  border: 1px solid #999999;
  color:black;
}
#careplus .icn-info {
  background-color: #fef263;
  border: 2px solid #fef263;
  color:black;
}

/*スマホ表示対応*/
@media screen and (max-width:768px) and (min-width:1px) {
#careplus .box_item,#careplus .box_arrow {
  width:100%!important;
  text-align: center !important;
}
#careplus .box_arrow {
  height: 70px!important;
}
#careplus .arrow {
  width:20px;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
#careplus .arrow:before {
  left:20px;
}
}