:root{
    --blue:#2b5f9e;
    --blue-fore:#ffffff;
    --gray:#e9edf2;
    --text:#1f2937;
    --gap:12px;
    --radius:12px;
  }


  .table-wrapper {
    max-width:800px;
    margin:0 auto;
  }

  /* タイトル部分 */
  .table-title {
    font-size:1.25rem;
    font-weight:700;
    color:var(--blue);
    margin-bottom:12px;
    text-align:left;
  }

  .process-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 var(--gap);
    table-layout:fixed;
  }

  .process-table th,
  .process-table td{
    padding:4px 20px;
    vertical-align:middle;
  }

  .col-label{
    width:170px;
    background:var(--blue);
    color:var(--blue-fore);
    font-weight:700;
    text-align:center;
    white-space:nowrap;
    border-radius:var(--radius) 0 0 var(--radius);
  }

  .col-arrow{
    width:42px;
    position:relative;
    background:var(--gray);
    padding:0;
  }
  .col-arrow::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--gray);
  }
  .col-arrow::after{
    content:"";
    position:absolute;
    top:50%;
    left:-1px;
    transform:translateY(-50%);
    border-width:18px 0 18px 18px;
    border-style:solid;
    border-color:transparent transparent transparent var(--blue);
  }

  .col-desc{
    background:var(--gray);
    border-radius:0 var(--radius) var(--radius) 0;
  }

  .col-desc ul {
    margin:0;
    padding-left:1.2em;
    list-style-type:"- "; /* ハイフンをリスト記号に設定 */
  }

  .col-desc li {
    margin:0.3em 0;
  }

  @media (max-width:720px){
    .col-label{ width:130px; padding-left:12px; padding-right:12px; }
    .col-arrow{ width:28px; }
    .process-table th, .process-table td{ padding:4px 16px; }
    body{ padding:16px; }
  }