/*ギャラリー型レイアウト42503*/

.case_area .case_maintxt{
    padding-top:50px;
    margin:0 auto;
    position:relative;
    background-color: #FAFAFA;
}

    
.case_area .sysExplanation .case_right{
    max-width:350px;
    padding:0px 20px 20px 20px;
    margin-left:20px;
}

.case_area .sysExplanation .case_left{
    padding:20px 20px;
    margin-bottom: 50px;
}


#sysItemDetail .case_area .overview_area {
    margin-bottom: 0vw;
}

#sysItemDetail .case_area h2{
    background-color:#F3F3F3;
    padding: 0.25em 0.5em 0.25em 0.5em;
    margin: 15px 0 5px 0;
    border-left: solid 5px #20304D;/*左線*/ 
}

#sysItemDetail .toc_side{
    display:none;
}

#sysItemDetail .toc_side li{
    margin-bottom:0.5vw;
    margin-left: 2vw;
}

#sysItemDetail .toc_main li{
    margin-left: 7vw;
}



ol.toc_side, ol.toc_main{
    counter-reset: list;
}

 ol.toc_side li:before {
    counter-increment: list;
    content: counter(list);
    background: #202f4d;
    color: #fff;
    position: absolute;
    width: 18px;
    text-align: center;
    height: 18px;
    font-size:0.65rem;
    left:1.5vw;
    margin-top:3px;
}

 ol.toc_main li:before {
    counter-increment: list;
    content: counter(list);
    background: #202f4d;
    color: #fff;
    position: absolute;
    width: 18px;
    text-align: center;
    height: 18px;
    font-size:0.7rem;
    left:7vw;
    margin-top:5px;
}

ol.toc_side .hide_list:before {
    content:none;
}


#sysItemDetail .case_area p{
    margin-bottom: 30px;
}

#sysItemDetail .pentagon {
    background: rgba(0,27,69,.2);
    height: 23.75vw;
    right:3.625vw;
    top: 8.5vw;
    transform: rotate(39deg)!important;
    width: 25vw
}


#sysItemDetail .pentagon02 {
    background: rgba(211,253,237,.2);
    height: 30.875vw;
    mix-blend-mode: overlay;
    right: 8.625vw;
    top: 2.375vw;
    transform: rotate(29deg) !important;
    width: 32.5vw
}


#sysItemDetail .pentagon_cmn {
    -webkit-clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
    clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
    position: absolute;
    mix-blend-mode: overlay;
    transition: all 3s ease;
}


#sysItemDetail .sysItemImages img{
        mix-blend-mode: normal;
        position: relative;
        z-index: 1;
    }



@media screen and (min-width: 801px) {

    #sysItemDetail .toc_side{
        display:block;
    }

    #sysItemDetail .toc_main{
        display:none;
    }
    
        
    #sysItemDetail .case_area .overview_left{
        width:65%;
        float:left;
        }
        
    #sysItemDetail .case_area .overview_right{
        width:30%;
        margin: 0 auto;
    }

    #sysItemDetail .case_area h1{
        font-size:2rem;
        margin-top:20px;
    }

    .case_area .sysExplanation .case_right{
        width:30%;
    }

    .case_area .sysExplanation .case_left{
        width:65%;
        padding:20px 30px 50px 30px;
        background-color: #FFF;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.35);
        margin-left:40px;
    }
    
    #sysItemDetail .case_area .sysExplanation .flex_box {
        display: flex;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .case_area .sysExplanation .case_right .toc_area{
        position:sticky;
        top:100px;
        padding:20px 20px;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.35);
        background-color: #FFF;
    }

    .case_area .sysExplanation .case_right .case_sidebanner{
        margin-top:40px;
    }

    #sysItemDetail .case_area .case_right p{
        margin-bottom:10px;
    }

    
    }    






/*機能詳細ページ（画像右パターン）*/
#sysItemDetail .sysItemName {
    margin:10px auto 20px auto;
    }   

#sysItemDetail .sysItemName h1 {
    position: relative;
    color: var(--white);
    background:var(--orange);
    line-height: 1.4;
    padding: 0.25em 0.5em;
    margin: 2em 25% 0.5em 0em;
      }

#sysItemDetail .sysItemName h1:after {
    position: absolute;
    font-family: var(--din);
    font-weight: 900;
    content: 'FUNCTION';
    background: var(--gray02);
    color: var(--white);
    left: 0px;
    bottom: 100%;
    padding: 3px 7px 1px;
    font-size: 0.5em;
    line-height: 1;
    letter-spacing: 0.05em
      }

    #sysItemDetail .catch_copy{
        font-size: 1.2rem;
        font-weight:600;
        margin-bottom: 0.5vw;
    }
    
    #sysItemDetail .pc_overview .catch_description{
        display:none;
    }
    
    #sysItemDetail .sp_overview .catch_copy{
        display:none;
    }
    
    #sysItemDetail .overview_area {
        color:#fafafa;
        padding-top: 10px;
        padding-bottom: 50px;
    }

    #sysItemDetail .flex_box {
        display:block;
        width:95%;
        max-width:1100px;
        margin:0 auto;
    }

    #sysItemDetail .dammy .sysExplanation{
        background: var(--white);
        overflow: hidden;
        position: relative;
        padding-top: 80px;
    }
    
    
    @media screen and (min-width: 801px) {
        
    #sysItemDetail .overview_left{
        width:55%;
        float:left;
        }
        
    #sysItemDetail .overview_right{
        width:40%;
        margin: 0 auto;
    }
        
    #sysItemDetail .pc_overview .catch_description{
        display:block;
    }

    #sysItemDetail .flex_box {
        display:flex;
    }
    
    
    }    

/*商品ブロック*/

.sysItemBlock ul{
    display:flex;
    max-width:1100px;
    margin:30px 10%;
}


.sysItemBlock li{
    border-radius: 8px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
    padding:5px 15px 15px 15px;
    width:30%;
    margin-right:2vw;
    background-color:var(--white)
}

.sysItemBlock .sysItemName a{
    font-weight:bold;
    color:var(--white);
    background-color:var(--orange);
    font-size:1.5rem;
    padding:10px 30px 10px 10px ;
    position: relative;
}

.sysItemBlock .sysItemName a:after {
    position: absolute;
    font-family: var(--din);
    font-weight: 900;
    content: 'FUNCTION';
    background: var(--gray02);
    color: var(--white);
    left: 0px;
    bottom: 100%;
    padding: 3px 7px 1px;
    font-size: 0.5em;
    line-height: 1;
    letter-spacing: 0.05em;
      }

.sysFuncItemBlock h2{
        text-align:center;
        font-size:2rem;
    }
    




/*エリア幅系*/

.mw_1200px{
    width:95%;
    max-width:1200px;
    margin:0 auto;
}

.mw_1100px{
    width:95%;
    max-width:1100px;
    margin:0 auto;
}

.mw_1000px{
    width:90%;
    max-width:1000px;
    margin:0 auto;
}

.bgc_gray{
    background-color:#F3F3F3;
    padding:2.5vw;
    margin-bottom:5vw;
}

.mt_100px{
    margin-top:100px;
}

.header_padding{
    /*padding-top:75px;*/
}

.pt_100px{
    padding-top:100px;
}




/*見出し系*/

span.navy_underline {
    border-bottom: solid 3px #20304D;
    padding: 0.5em 3em 0.7em 0.5em;
    line-height: 3em;
}

.navy_vertical_line{
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    border-left: solid 5px #20304D;/*左線*/ 
}

.heading_grayback{
    background-color:#F3F3F3;
    padding: 0.25em 0.5em 0.25em 0.5em;
    margin: 15px 0 10px 0;
    border-left: solid 5px #20304D;/*左線*/ 
}





/*テキスト系*/
.fw_bold{
    font-weight: bold;
}

.ta_right {
    text-align: right;
}

.ta_center{
    text-align:center;
    margin-bottom:2.5vw;
}

.ta_left {
    text-align:left;
}

.mt_0px{
    margin-top:0px;
}

.mt_0px{
    margin-top:30px;
}

.mt_50px{
    margin-top:50px;
}

.mt_100px{
    margin-top:100px;
}

.mb_0px{
    margin-bottom:0px;
}

.mb_30px{
    margin-bottom:30px;
}

.mb_50px{
    margin-bottom:50px;
}

.mb_100px{
    margin-bottom:100px;
}

.mb_2vw{
    margin-bottom:2vw;
}

.w_10per{
width: 10%;
}

.w_20per{
    width: 20%;
}
    
.w_30per{
    width: 30%;
    }
    
.w_40per{
    width: 40%;
}

.w_50per{
    width: 50%;
}
        
.w_60per{
    width: 60%;
}

.w_70per{
    width: 70%;
    }
    
.w_80per{
    width: 80%;
}

.w_90per{
    width: 90%;
}
        
.w_100per{
    width: 100%;
}

            

/*パンクず*/
.breadcrumb_darkgray{
    margin-top: 100px;
    font-size:0.75rem;
    margin-left: 4.5vw;
}

.breadcrumb_darkgray a{
    color:#ACACAC;
}

.breadcrumb_darkgray a:after{
    content:">";
    padding:0 0.5vw;
}

.breadcrumb_darkgray a:last-of-type:after{
        content:none;
}

.sysCategoryPankuzu{
    font-size:0.75rem;
    margin-left: 4.5vw;
    color:#ACACAC;
}

.sysCategoryPankuzu a,.sysPankuzuItemName{
    color:#ACACAC;
    padding:0 0.5vw;
}


#sysItemDetail {
    background: var(--white);
    padding-bottom: 100px;
    padding-top: 100px;
    position: relative
}

#sysItemDetail .p_under_fixed:after {
    border-style: solid;
    border-bottom: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 60px solid var(--white);
    bottom: 0;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translate(-50%,100%);
    width: 0;
    z-index: 1
}

#sysItemDetail .detail_func_system {
    max-width: 1200px;
    margin: 0 auto;
}


#sysItemDetail .detail_func_system .heading {
    margin-bottom: 45px
}

#sysItemDetail .detail_func_system .func_flx {
    display: flex;
    justify-content: space-between;
    margin-bottom: 90px;
    overflow: clip;
    position: relative
}

#sysItemDetail .detail_func_system .func_flx .func_col {
    left: 50%;
    margin-inline:auto;min-width: 66.75vw;
    position: relative;
    transform: translateX(-50%)
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec {
    margin-bottom: 0;
    padding-bottom: 250px;
    padding-top: 75px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec.func_sec01 {
    padding-top: 80px;
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec:last-of-type {
    padding-bottom: 160px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk {
    width: 28.5vw
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_image_sp {
    display: none
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_image_sp img {
    height: 375px;
    width: 100%
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk h3 {
    background: var(--orange);
    color: var(--white);
    display: inline-block;
    font-size: 2.125rem;
    font-weight: 700;
    margin-bottom: 38px;
    padding-left: 10px;
    padding-right: 10px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_subttl {
    font-size: 24px;
    margin-bottom: 15px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_subttl.func_subttl02 {
    margin-bottom: 30px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt p {
    margin-bottom: 15px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt p .link {
    color: #7b8fba;
    text-decoration-style: dotted
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt p .link span {
    border-bottom: 1px dotted #7b8fba
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt p .link img {
    vertical-align: middle;
    width: 14px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt p .marker {
    background: #d7e5fa
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt .btn {
    margin-top: 60px
}

#sysItemDetail .detail_func_system .func_flx .func_col .func_sec .func_blk .func_txt .btn a {
    font-size: .8125rem;
    max-width: 220px
}

#sysItemDetail .detail_func_system .func_flx .func_image {
    height: 100%;
    min-width: 32.5vw;
    position: sticky;
    right: 16vw;
    top: 30%;
}

#sysItemDetail .detail_func_system .func_flx .func_image img {
    display: none;
    width: 100%;
}

#sysItemDetail .detail_func_system .func_flx .func_image img.is_show {
    display: block
}

#sysItemDetail_list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px
}

#sysItemDetail_list_item {
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
    margin-bottom: 40px;
    margin-right: 32px;
    max-width: 345px;
    width: 100%
}

#sysItemDetail_list_item:nth-child(3n) {
    margin-right: 0
}

#sysItemDetail_list_item a {
    display: block;
    padding: 45px 50px 40px
}

#sysItemDetail_list_item a:hover dl dt span:before {
    transition: all .3s ease;
    width: 100%
}

#sysItemDetail_list_item a:hover dl dt:after,#sysItemDetail_list_item a:hover dl dt:before {
    right: -20px;
    transition: all .3s ease
}

#sysItemDetail_list_item a dl dt {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
    position: relative
}

#sysItemDetail_list_item a dl dt>span {
    display: -webkit-box;
    overflow: hidden;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-right: 10px
}

#sysItemDetail_list_item a dl dt>span:before {
    background: var(--orange);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transition: all .3s ease;
    width: 0
}

#sysItemDetail_list_item a dl dt:before {
    background: var(--primary);
    content: "";
    height: 2px;
    margin-top: 2px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: rotate(-45deg);
    transition: all .3s ease;
    width: 8px;
    z-index: 10
}

#sysItemDetail_list_item a dl dt:after {
    background: var(--primary);
    content: "";
    height: 2px;
    margin-top: -3px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: rotate(45deg);
    transition: all .3s ease;
    width: 8px;
    z-index: 10
}

#sysItemDetail_list_item a dl dd ul {
    margin-bottom: 15px
}

#sysItemDetail_list_item a dl dd ul li {
    background: #7b8fba;
    color: var(--white);
    display: inline-block;
    font-size: .6875rem;
    padding: 1px 8px
}

#sysItemDetail>.btn a {
    margin-inline:auto
}


#sysItemDetail .detail_func_system .func_flx .func_image img.is_show{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
     
@keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }


/*料金エリア*/

/*料金エリア*/

#sysItemDetail .detail_price {
    background: var(--white)
}

#sysItemDetail .detail_price>.heading {
    margin-bottom: 50px
}

#sysItemDetail .detail_price .desc{
    text-align: center;
}

#sysItemDetail .detail_price .price_bg {
    background: #eaeaea;
    padding-bottom: 60px;
    padding-top: 60px
}

#sysItemDetail .detail_price .price_bg>.heading {
    display: none;
    margin-bottom: 30px
}

#sysItemDetail .detail_price .price_bg .price_list {
    display: flex;
    gap: 25px;
    padding-bottom: 60px
}

#sysItemDetail .detail_price .price_bg .price_list .price_item {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
    overflow: hidden;
    padding-top: 34px;
    width: min(100%,1300px);
}

#sysItemDetail .detail_price .price_bg .price_list .price_item h3 {
    align-items: center;
    border: 1px solid #20304d;
    border-radius: 30px;
    display: flex;
    font-size: 20px;
    height: 45px;
    justify-content: center;
    margin-inline:auto;margin-bottom: 34px;
    width: 200px
}
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap {
        border-bottom: 1px solid hsla(0,0%,80%,.3);
        padding-bottom: 40px
    }
    
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap .price_format {
        display: flex;
        margin-bottom: 25px;
        margin-left: 50px
    }
    
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap .price_format:last-of-type {
        margin-bottom: 0
    }
    
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap .price_format dt {
        align-items: center;
        background: var(--darkblue);
        color: #fff;
        display: flex;
        font-size: 12px;
        height: 50px;
        justify-content: center;
        margin-right: 10px;
        width: 50px
    }
    
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap .price_format dd {
        color: var(--darkblue);
        font-size: 3.25rem;
        font-weight: 700;
        line-height: 1
    }
    
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap .price_format dd .yen {
        font-size: 2.5rem;
        margin-right: 8px
    }
    
    #sysItemDetail .detail_price .price_bg .price_list .price_item .price_format_wrap .price_format dd .other {
        font-size: 1.25rem;
        margin-left: 10px;
        position: relative;
        top: -10px
    }

    #sysItemDetail .detail_price .price_bg .btn.large a{
        margin-inline: auto;
    }

    #sysItemDetail .heading {
        margin-bottom: 45px
    }
    
    #sysItemDetail .desc {
        margin-bottom: 40px;
        margin-inline:auto;width: min(100%,1000px)
    }
    
    #sysItemDetail .price_blk {
        background: #fff;
        margin-bottom: 60px;
        min-height: 200px
    }
    
    #sysItemDetail .price_blk,#sysItemDetail .price_blk .price_blk_inner {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
    
    #sysItemDetail .price_blk .price_blk_inner {
        margin-inline:auto;width: min(100%,700px)
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl {
        align-items: center;
        display: flex
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl:last-child {
        animation-delay: .35s
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl:last-child dd .other {
        letter-spacing: .05em;
        margin-left: 20px
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl:last-child dd .other span {
        font-weight: 400
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl dt {
        align-items: center;
        background: var(--darkblue);
        color: #fff;
        display: flex;
        height: 67px;
        justify-content: center;
        margin-right: 20px;
        width: 150px
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl dd {
        color: var(--darkblue);
        font-size: 5rem;
        font-weight: 700;
        line-height: 1;
        padding-bottom: 20px;
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl dd .yen {
        font-size: 2.5rem;
        margin-right: 18px;
    }
    
    #sysItemDetail .price_blk .price_blk_inner dl dd .other {
        font-size: 1.875rem;
        margin-left: 10px;
    }
    
    
    #sysItemDetail .p_price_btn .btn a {
        max-width: 400px;
        margin:0 auto;
    }
    




<!---表CSS--->
table {
border: 1px solid;
}
td, th {
border: 1px solid;
}
table{
border-collapse: collapse;
}

@media screen and (min-width:1100px){
.case_left img{
width:70%;
}
}

h3{
border-bottom: 3px solid #20304d;
margin-bottom: 20px;
font-size: 1.4em;
}

h4{
font-size: 1.3em;
margin-bottom: 10px;
  font-weight: bold;
  padding: 10px 0px;
  margin-bottom: 1em;
  border-bottom: 3px double #edf4ff;
}
h5{
font-size: 1.1em;
margin-bottom: 10px;
}


.toc_main {
  list-style-type: none;
  padding-left: 0;
}

.toc_main > li {
  margin-bottom: 1em;
}

.toc_main ol {
  list-style-type: disc;
  padding-left: 1.5em;
}

.toc_main ol li {
  margin-bottom: 0.5em;
}

.toc_sub li:before{
  list-style-type: none;
}

      table {
              width: 100%;
              border-collapse: collapse;
          }
          th, td {
              border: 1px solid #ddd;
              padding: 8px;
              text-align: left;
          }
          th {
              background-color: #f2f2f2;
          }
          .center {
              text-align: center;
              background-color: #f2f2f2;
          }
          .no-top-border {
              border-top: none!important;
          }
  
          table {
              width: 100%;
              border-collapse: collapse;
              table-layout: fixed;
          }
          th, td {
              border: 1px solid #ddd;
              padding: 8px;
              text-align: left;
          }
          th {
              background-color: #f2f2f2;
          }
          td[colspan] {
              text-align: center;
          }
          .f2{
              background-color: #f2f2f2;
          }
  .cta-b{
  width:100%!important;
  }
  .link {
      color: #7b8fba;
      text-decoration-style: dotted;
  }
  
  .link span {
      border-bottom: 1px dotted #7b8fba;
  } 
      
      .link img {
      vertical-align: middle;
      width: 14px;
  }


.date {
    margin-top:20px;
    background:#fafafa!important;
    width:fit-content;
    border-radius:25px;
    padding:2px 10px
}

.date-publish{
    padding:0 5px;
    color:#666;
}


.date-publish::before{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(/img/column/publish.png) no-repeat;
  background-size: contain;
  margin-right: 4px;
    margin-left: 6px;
    position:relative;
    top:2px;
}


.date-modified{
    color:#666;
    margin-right:8px;
}

.date-modified::before {
content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(/img/column/modified.png) no-repeat;
  background-size: contain;
  margin-right: 4px;
    margin-left: 8px;
    position:relative;
    top:2px;
}

.box_19_ttl {
    background: #7f8eb6;
    color: #fff;
    font-weight: bold;
    padding: 0.5em 1em 0.2em;
    display: inline-block;
    margin-bottom: 0;
    border-radius: 5px 5px 0 0;
    }
  .box_19 {
    border: 1px solid #7f8eb6;
    background: #edf4ff;
    padding: 1em;
    }

    .c_linkto.longc_linkto {
        margin-bottom: 50px;
      }
      @media only screen and (min-width: 768px) {
        .c_linkto.longc_linkto {
              max-width: 80%;
              display: table;
              margin: 0 auto;
          }
      }
      @media only screen and (min-width: 768px) {
          .c_linkto {
              display: inline-block;
              max-width: 310px;
              margin-right: 20px;
          }
      }
      .longc_linkto {
          margin-bottom: 1.5em;
          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
      }
      .c_linkto {
          display: block;
          overflow: hidden;
          width: 100%;
          margin: 1em 0;
          padding: 0;
          border-radius: 3px;
          background: #fff;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
          color: #555;
          font-weight: bold;
          text-decoration: none !important;
      }
      
      @media only screen and (min-width: 768px) {
          .longc_img {
              width: 30%;
          }
      }
      @media only screen and (min-width: 768px) {
          .longc_img, .c_linkto.longc_linkto .longc_content {
              display: table-cell;
              vertical-align: middle;
          }
      }
      
      @media only screen and (min-width: 768px) {
          .longc_img img {
              width: 100%;
              padding: 10px 10px 5px 10px;
          }
      }
      
      .entry-content img {
          max-width: 100%;
          height: auto;
      }
      
      
      .c_linkto .c_linkto_text {
          display: block;
          padding: 15px 13px;
          line-height: 1.6;
      }
      
      .longc_title{
        font-size: 18px;
      }
      
      .longc_excerpt {
          font-size: 12px;
          display: block;
          padding: 10px 0 0 0;
          font-weight: normal;
      }
      
      .fa-clock:before {
        content: "";
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url(/img/column/publish.png) no-repeat;
          background-size: contain;
          margin-right: 4px;
          margin-left: 8px;
          position: relative;
          top: 2px;
      }
      
      .longc_time{
        margin-bottom: 5px;
      }
      .point {
        display: inline;
        font-weight: bold;
        background: linear-gradient(transparent 60%, rgb(238, 242, 249) 30%);
    }

    @media screen and (min-width: 801px) {
#sysItemDetail .toc_side li a{
  color:#606060;
}

#sysItemDetail .toc_side li a:hover{
  border-bottom : solid 1px #606060;
}


#sysItemDetail .toc_side li.is-active a{
  color:#20304d;
  font-weight:bold;
}

#sysItemDetail ol.toc_side li:before {
    background: #fff;
    color: #20304d;
    position: absolute;
    width: 18px;
    text-align: center;
    height: 18px;
    font-size:0.65rem;
    left:1.5vw;
    margin-top:3px;
    border:solid 1px #20304d;
}

#sysItemDetail  ol.toc_side li.is-active:before {
    counter-increment: list;
    content: counter(list);
    background: #20304d;
    color: #fff;
    position: absolute;
    width: 18px;
    text-align: center;
    height: 18px;
    font-size:0.65rem;
    left:1.5vw;
    margin-top:3px;
    border:solid 1px #20304d;
}
}