@charset "UTF-8";
/*--------------------------------------------
TABLE01
---------------------------------------------*/
.table01{
  th,td{
    display: block;
    align-content: center;
    letter-spacing: .05em;
    text-indent: .05em;
  }
  thead{
    tr{
      th:not(:last-of-type){
        background-color: var(--linen);
        font-weight: 700;
      }
      th:last-of-type{
        background-color: var(--green);
        color:white;
        font-weight: 700;
      }
    }
  }
  tbody{
    th,td{
      background-color: #fefefe;
      font-weight: 600;
    }
    td{
      text-align: right;
    }
    td:last-of-type{
      background-color: var(--ivory);
      text-align: center;
      text-indent: 0.05em;
    }
  }
  @media screen and ( width <= 781px ){
    width : calc( 350 * var(--viewportBase ) );
    margin-inline : auto;
    thead{
      display: none;
    }
    tbody{
      display: contents;
      tr{
        display: block;
        border-radius : calc( 8 * var(--remBase ) );
        outline : solid 1px var(--green);
        outline-offset : -1px;
        overflow: hidden;
        + tr{
          margin-top : calc( 20 * var(--remBase ) );
        }
      }
      th,td{
        display: grid;
        grid-template-columns: calc( 120 * 100% / 325 ) 1fr;
        align-content: center;
        padding-block : calc( 8 * var(--remBase ) );
        padding-inline : calc( 12.5 * var(--remBase ) );
        word-break: auto-phrase;
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 24 / 14 );;
        text-align: right;
        &:before{
          justify-content: start;
          align-items: center;
          text-align: left;
          padding-inline : calc( 12.5 * var(--remBase ) );
        }
      }
      td:not(:last-of-type){
        border-top : dashed 1px var(--green);
      }
      th{
        background-color: var(--linen);
      }
      td:last-of-type{
        background-color: var(--green);
        color:white;
        text-align: right;
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.5;
        &:before{
          color:var(--cream);
          font-size: calc( 14 * var(--remBase ) );;
          line-height: calc( 24 / 14 );;
        }
      }
    }
  }
  @media print,screen and ( width > 781px ){
    border-radius : calc( 12 * var(--remBase ) );
    display: block;
    outline : solid calc( 2 * var(--remBase ) ) var(--green);
    overflow: hidden;
    outline-offset : calc(  -2 * var(--remBase ) );
    box-shadow :  0 calc( 4 * var(--remBase) )  calc( 4 * var(--remBase) )  color-mix( in srgb , black 25% , transparent );
    thead , tbody{
      display: contents;
    }
    tr{
      grid-template-columns: repeat( auto-fit , minmax( 0px , 1fr ) );
      display: grid;
    }
    th,td{
      padding-inline: .75em;
    }
    thead{
      th{
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.25;
        padding-block : calc( 24 * var(--remBase ) );
        border-bottom : solid calc( 2 * var(--remBase) ) var(--green);
        &:not(:last-of-type){
          border-left : solid calc( 2 * var(--remBase) ) var(--green);
        }
      }
    }
    tbody{
      th,td{
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.25;
        padding-block : calc( 20 * var(--remBase ) );
      }
      th{
        text-align: left;
      }
      td{
        border-left : solid calc( 2 * var(--remBase) ) var(--green);
        &:last-of-type{
          font-size: calc( 18 * var(--remBase ) );;
          line-height: calc( 20 / 18 );;
        }
      }
      tr:not(:last-of-type){
        th,td{
          border-bottom : solid calc( 2 * var(--remBase) ) var(--green);
        }
      }
    }
  }
}

/*--------------------------------------------
TABLE01
---------------------------------------------*/
.table02{
  th,td{
    display: block;
    align-content: center;
    letter-spacing: .05em;
    text-indent: .05em;
  }
  thead{
    tr{
      th{
        background-color: var(--linen);
        font-weight: 700;
      }
    }
  }
  tbody{
    th,td{
      background-color: #fefefe;
      font-weight: 600;
    }
    td{
      text-align: right;
    }
  }
  @media screen and ( width <= 781px ){
    width : calc( 350 * var(--viewportBase ) );
    margin-inline : auto;
    thead{
      display: none;
    }
    tbody{
      display: contents;
      tr{
        display: block;
        border-radius : calc( 8 * var(--remBase ) );
        outline : solid 1px var(--green);
        outline-offset : -1px;
        overflow: hidden;
        + tr{
          margin-top : calc( 20 * var(--remBase ) );
        }
      }
      th,td{
        display: grid;
        grid-template-columns: calc( 120 * 100% / 325 ) 1fr;
        align-content: center;
        padding-block : calc( 8 * var(--remBase ) );
        padding-inline : calc( 12.5 * var(--remBase ) );
        word-break: auto-phrase;
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 24 / 14 );;
        text-align: right;
        &:before{
          justify-content: start;
          align-items: center;
          text-align: left;
          padding-inline : calc( 12.5 * var(--remBase ) );
        }
      }
      th{
        background-color: var(--linen);
      }
      td{
        border-top : dashed 1px var(--green);
      }
    }
  }
  @media print,screen and ( width > 781px ){
    border-radius : calc( 12 * var(--remBase ) );
    display: block;
    outline : solid calc( 2 * var(--remBase ) ) var(--green);
    overflow: hidden;
    outline-offset : calc(  -2 * var(--remBase ) );
    box-shadow :  0 calc( 4 * var(--remBase) )  calc( 4 * var(--remBase) )  color-mix( in srgb , black 25% , transparent );
    thead , tbody{
      display: contents;
    }
    tr{
      grid-template-columns: repeat( auto-fit , minmax( 0px , 1fr ) );
      display: grid;
    }
    th,td{
      padding-inline: .75em;
    }
    thead{
      th{
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.25;
        padding-block : calc( 24 * var(--remBase ) );
        border-bottom : solid calc( 2 * var(--remBase) ) var(--green);
        &:not(:first-of-type){
          border-left : solid calc( 2 * var(--remBase) ) var(--green);
        }
      }
    }
    tbody{
      th,td{
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.25;
        padding-block : calc( 20 * var(--remBase ) );
      }
      th{
        text-align: left;
      }
      td{
        border-left : solid calc( 2 * var(--remBase) ) var(--green);
      }
      tr:not(:last-of-type){
        th,td{
          border-bottom : solid calc( 2 * var(--remBase) ) var(--green);
        }
      }
    }
  }
}