@charset "utf-8";


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


#a10networks ul.link-list-dot.link-list-dot-white>li:before {
    color: #ffffff;
}

/*---------2021/01----------------*/
#a10networks .box-red-radius{
border:2px solid #F00;
border-radius:20px;
padding:10px;
}
#a10networks .border-radius-10{
border-radius:10px;
}
#a10networks .border-radius-20{
border-radius:20px;
}
#a10networks .border-right{
border-right:1px solid #666;
}
#a10networks .align-items--center{
align-items:center;
}
#a10networks .align-items--end{
align-items:flex-end;
}
#a10networks .align-self--end{
align-self:flex-end;
}
#a10networks .align-self--center{
align-self:center;
}
#a10networks .solution-box{
position:relative;
z-index:9;
}

#a10networks .fs14px{
font-size:14px;
}
#a10networks .fs16px{
font-size:16px;
}
#a10networks .fs18px{
font-size:18px;
}
#a10networks .fs19px{
font-size:19px;
}
#a10networks .fs20px{
font-size:20px;
}

/*「多彩なA10ネットワークス ソリューション」の水色見出し*/
#a10networks .title-bg-lightblue{
  background-color: #0ae !important;
  color: #fff !important;
  font-size: 123.1% !important;
  font-weight: 700;
  padding: 10px !important;
  border-radius:10px 10px 0 0;  
  width: 400px !important;
  text-align: center !important;
}

#a10networks .arrow-right{
width:50px;
}

#a10networks a.sol_btn {
margin-left: auto;
margin-right: 0; 
}


#a10networks .h-ttl_a10networks{
    color: #000;
    font-size: 22px;
    border-bottom: 3px solid #007aff;
    padding-bottom: 0.2em;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 1em;
}

/*cmn.css の h-ttl05 の indentなしバージョン */
#a10networks .h-ttl05_a10_h4 {
    color: #0A2986;
    font-size: 16px;
}
#a10networks .blue_line{
    background: linear-gradient(transparent 85%, #4c9ed9 85%);
}
.ttl-List li a.w-auto_inline {
width:auto;
display:inline;
}
.arwList li a.w-auto_inline:hover{
background:none;
}
.ttl-List li .icn-local-handson {
margin-top: -1.1em;
    top: 50%;
    position: absolute;
    left: 10px;
    background-color: #FFC000;
    border: 2px solid #FFC000;
    width: 8.3em;
    display: block;
    text-align: center;
    float: left;
    font-size: 11px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0.4em 0.3em 0.2em 0.3em;
    line-height: 1;
}
.ttl-List li .icn-ondemand {
margin-top: -1.1em;
    top: 50%;
    position: absolute;
    left: 10px;
    background-color: #B91F69;
    border: 2px solid #B91F69;
    width: 8.3em;
    display: block;
    text-align: center;
    float: left;
    font-size: 11px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0.4em 0.3em 0.2em 0.3em;
    line-height: 1;
}
.ttl-List li .icn-treaning {
margin-top: -1.1em;
    top: 50%;
    position: absolute;
    left: 10px;
    background-color: #5B9BD5;
    border: 2px solid #5B9BD5;
    width: 8.3em;
    display: block;
    text-align: center;
    float: left;
    font-size: 11px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0.4em 0.3em 0.2em 0.3em;
    line-height: 1;
}
.ttl-List li .icn-handson {
margin-top: -1.1em;
    top: 50%;
    position: absolute;
    left: 10px;
    background-color: #4472C4;
    border: 2px solid #4472C4;
    width: 8.3em;
    display: block;
    text-align: center;
    float: left;
    font-size: 11px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0.4em 0.3em 0.2em 0.3em;
    line-height: 1;
}
.ttl-List li .icn-product-seminar {
margin-top: -1.1em;
    top: 50%;
    position: absolute;
    left: 10px;
    background-color: #00a4db;
    border: 2px solid #00a4db;
    width: 8.3em;
    display: block;
    text-align: center;
    float: left;
    font-size: 11px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0.4em 0.3em 0.2em 0.3em;
    line-height: 1;
}

@media screen and (max-width:767px) and (min-width:1px) {
#a10networks .border-right{
border-bottom:1px solid #666;
border-right:none;
}

#a10networks .arrow-right{
width:100%;
transform:rotate(90deg);
}
#a10networks a.sol_btn {
margin-left: auto;
margin-right: auto; 
}

#a10networks .title-bg-lightblue{
    width: 100% !important;
    height: auto;
}
ul.sp-row-List .icn-local-handson,
ul.sp-row-List .icn-product-seminar,
ul.sp-row-List .icn-handson,
ul.sp-row-List .icn-treaning{
width:15em;
margin-left: 0em;
margin-top: 0em;
position: relative;
left: 2px;
display: block;
top: auto;
}
}

.bd-bottom-1{
border-bottom:1px solid;
}
ul.link-list-dot.link-list-dot-blue01>li:before {
    color: #03c;
}
.h-ttl05 span{
display:inline;
border-bottom:1px solid #0A2986;
}
.base-wrap{
position:relative;
}
.wrap-abs{
position:absolute;
top:200px;
left:10px;
z-index:9;
}
.bg-blue99{
background:#0A2986;
}
.blue99{
color:#0A2986;
}
.bd-blue99{
border-color:#0A2986!important;
}
.bd-5{
border:5px solid;
}
.height55{
height:55px;
}
.height340{
height:340px;
}
.height550{
height:550px;
}
.height540{
height:540px;
}
.border-radius-10{
border-radius:10px;
}
.h-ttl05 {
    line-height: 1.8!important;
    text-indent: 0!important;
    padding-left: 0!important;
}
.arrow-99{
width: 0;
border: solid 20px transparent;
border-top-color: #0A2986;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 0;
display: inline-block;
}
#submenu-top {
    margin-bottom:0;
}
.submenu {
    background-color: #B91F69 !important;
    opacity: 1;
}
.submenu ul.pagelinks-02-list>li>a,
.submenu ul.pagelinks-02-list>li>span.no-link {
    border-left: 1px solid #B91F69 !important;
    border-top: 1px solid #B91F69 !important;
    border-bottom: 1px solid #B91F69 !important;
    min-height: 40px;
}
a.bb-blue99 {
    background-color: #0A2986!important;
    border: 1px solid #0A2986!important;
}
a.bb-blue99:hover {
    color: #0A2986!important;
    background-color: #FFFFFF !important;
}
@media screen and (max-width:767px) and (min-width:1px) {
.height55,
.height550,
.height540{
height:auto;
}
}
.inquiry_boxes a {
    display: block;
    width: 250px;
    height: 184px;
    position: relative;
    color: black;
    border: 1px solid #666;
    margin: auto;
}
span.inquiry_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: block;
    text-align: center;
}
a span.inquiry_box .inquiry_box_text {
    color: #000;
}
span.inquiry_box .inquiry_box_text {
    font-size: 18px;
    font-weight: bold;
}
span.inquiry_box img {
    width: 70px;
    margin-top: 20px;
}
span.inquiry_box::after {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid #b90f0f;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.ondemand-table .ft-th{
background-color:#409!important;
color:#FFF;
font-weight:bold;
}
.ondemand-table .ft-td.bg{
background-color:#f1f1f1!important;
}
th.bg-violet{
background-color:#409!important;
color:#FFF;
font-weight:bold;
text-align:center!important;
}
.nobold{font-weight:normal!important;}

.a10Button {
  background-color: #156082;
  color: white;
  padding: 10px 20px; /* 必要に応じて調整 */
  border: none; /* 境界線を消したい場合 */
  cursor: pointer; /* カーソルをポインタに変更 */
  text-align: center;
  /* 既存のflex-btn-* のスタイルを一部継承したい場合は、以下のように追加できます。
     ただし、競合が発生する可能性があるので注意が必要です。 */
  /* border-radius: 2px; */
  /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); */

  /* flex-direction: row; */ /* Flexbox関連のプロパティは必要に応じて追加 */
  /* ... */
}
.h-ttl10 {
  font-weight: bold; /* 見出し全体を太字にする */
}

.h-ttl10::before {
  content: "■"; /* ■ を追加 */
  color: #007aff; /* ■ の色を青色に */
  margin-right: 0.5em; /* ■ とテキストの間にスペース */
}