.com-title {
  position: relative; width: 100%; margin-bottom: 20px;
  .tit { 
    position: relative; padding-left: 20px; font-size: 1.8rem; font-weight: 600;
    &.sub {padding-left:25px; padding-bottom:20px; border-bottom:1px solid var(--line-color);}
    &:before { content: ''; position:absolute; top:3px; left:0; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #7babff; }
    .total {
      font-size: 1.2rem;
    }
  }
}

.dsc-box {
  &:not(:last-child) { margin-bottom: 20px; }
  .s-tit {
    font-size: 1.5rem; font-weight: 600; padding-bottom: 10px;
  }
}

.tit-exp {
  ul {
    position:relative;
    &:after {
      position:absolute; content:''; width:4px; height:calc(100% - 5px); top:50%; transform: translateY(-50%); background:#e3e3e3; border-radius: 5px; left:0;
    }
    li {
      padding-left:20px;position:relative; line-height: 27px; font-size: 1.4rem; 
      &.flex {
        display: flex; gap: 10px;
      }
      &.list  {
        padding-left:25px;    
        &:before {
          width:3px; height:3px; border-radius: 50%; background:#999; top:11px; left:15px; content:''; position:absolute;
        }
        b.point {
          color:var(--main-color); margin-right:6px;
        }
        a {
          color:#7babff; text-decoration: underline;
          img {
            width:17px; height:17px; vertical-align: middle; margin-right:2px; margin-left:7px;
          }
        }
      }
    }
  }
}

@media(max-width: 500px) {

  .com-title {
    .tit { 
      position: relative; padding-left: 20px; font-size: 1.6rem; font-weight: 600; 
    }
  }

  .tit-exp {  
    ul {
      li {
        font-size: 1.3rem; padding-bottom: 10px;
        &.list {
          a {
            display: block;
          }
        }
        &.flex {
          flex-direction: column; gap: 0;
          .txt {
            font-size: 1.2rem; line-height: 1.6;
          }
        }
      }
    }
  }
}