@charset "utf-8";


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

#cato .justify-between {
        justify-content: space-between;
    }
#cato .flx-ai--center {
        align-items:center;
    }
#cato .align-center{
align-items:center;
}
#cato .color-bl_green{
color:rgb(15,138,101);
}
#cato .color-normal{
color:#000;
}
#cato hr.bl_green{
border-bottom:1px solid rgb(15,138,101);
border-top:none;
border-left:none;
border-right:none;
}
#cato .no-bold{
font-weight:normal!important;
}
#cato .bg-bl_green{
background-color:rgb(15,138,101);
color:#FFF;
}
#cato .radius-10{
border-radius:10px;
}
#cato .radius-20{
border-radius:20px;
}
#cato .radius-30{
border-radius:30px;
}
#cato .radius-5{
border-radius:5px!important;
}
#cato .border-bl_green{
border:1px solid rgb(15,138,101);
border-radius:10px;
padding:20px;
}
#cato .border-green-bottom{
border-bottom:1px solid rgb(15,138,101);
}
#cato .h-ttl-bl_green{
    background-color: #fff;
    padding: 1em 0.8em;
    font-size: 24px;
    font-weight: 700;
    border-top: 4px solid #0A2986;
color:rgb(15,138,101);
display:flex;
justify-content: space-between;
    }

#cato .h-ttl-bl_green-center{
    padding: 1em 0.8em 0 .8em;
    font-size: 24px;
    font-weight: 700;
    color:rgb(15,138,101);
    text-align:center;
}
#cato table.dataTable03{
width:100%;
}
table.dataTable03 th{
background-color:#0f8a65;
text-align:center;
font-weight:bold;
color:#FFF;
padding: 0.8em 1em;
width:180px
}
table.dataTable03 td{
background:#f1faec;
text-align:center;
border-bottom:1px solid #CCC;
padding: 0.8em .5em;
}
table.dataTable03 td.clear-cell{
border-bottom:none;
}
table.dataTable03 tr:last-child td{
border-bottom:none;
}

table.dataTable02b th{
background-color:rgba(21,136,100,.2)!important;
text-align:center;
}
table.dataTable02b td{
text-align:center;
}
.centered{
    padding-left:3em;
    padding-right:3em;
}
.circle-orange{
width:180px;
height:180px;
border-radius:90px;
background:#f8941d;
color:#FFF;
font-weight:bold;
position:absolute;
    top: 100px;
    right: 0;
    text-align: center;
    padding-top: 40px;
}
.triangle01{
    width: 0;
    height: 0;
    border-top: solid 60px transparent;
    border-right: 0;
    border-bottom: solid 60px transparent;
    border-left: solid 60px #0f8a65;
}
.triangle02{
    width: 0;
    height: 0;
    border-top: solid 60px #0f8a65;
    border-right: solid 120px transparent;
    border-bottom: 0;
    border-left: solid 120px transparent;
    margin: 0 auto;
}
.triangle03{
    width: 0;
    height: 0;
    border-top: solid 30px #626a6f;
    border-right: solid 30px transparent;
    border-bottom: 0;
    border-left: solid 30px transparent;
    margin: 0 auto;
}
.p-relative{
position:relative;
}
.flx-wrap--nowrap{
flex-wrap:nowrap;
}
.gray04{
color:#626a6f;
}
.bd-gray04{
border-bottom:1px dashed #626a6f;
}
.green01{
color:#0f8a65;
}
.height345{
height:345px;
}
.height225{
height:225px;
}
.height202{
height:202.5px;
}
.height140{
height:140px;
}
.w115{
width:115px;
}
.dataTable-cato{
border-top:2px solid #a9ce91;
border-bottom:2px solid #a9ce91;
}
.dataTable-cato thead td{
background:#f2f2f2;
border-bottom:2px solid #a9ce91;
font-weight:bold;
text-align:center;
padding:5px 10px;
}
.dataTable-cato tbody td{
padding:5px;
background:#FFF;
}
.dataTable-cato tbody tr:nth-child(odd) td{
background:#e2efda;
}
.cato-top{
position:relative;
}
.top-btn{
position:absolute;
    bottom: 0;
    right: 50px;
}
.bg-cato{
background:#0f8a65;
}
.balloon{
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 2px solid #0f8a65;
  border-radius:10px; 
}
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
    left: -22px;
    top: 50%;
    transform:translateY(-50%);
    border-right: 20px solid #0f8a65;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
    left: -18px;
    top: 50%;
    transform:translateY(-50%);
    border-right: 20px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.margin-left-auto{
margin-left:auto;
}
#submenu-top{
margin-bottom:0;
}
/*---------------------------------------*/
@media screen and (max-width:767px) and (min-width:1px) {
.centered{
    padding-left:1em;
    padding-right:1em;
}
.height345,
.height225,
.height202{
height:auto;
}
.top-btn{
position:relative;
right:initial;
}
.sp-flex{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
align-content: center;
flex-wrap: wrap;
}
.balloon::before,
.balloon::after{
display:none;
}
}

/*ご紹介資料／ホワイトペーパー カルーセルで、横幅の長い画像のスライドのため
画像サイズを調整する*/
#movie-thumb-size {
  width:210px;
  padding:11px 0; /*上下にpaddingを入れる*/
}

/*---------------------------------------*/
@media screen and (max-width:380px) and (min-width:1px) {
#movie-thumb-size {
    width: 80% !important;
}
}