<article>
  <div class="counter">
    <button type="button" class="increment">増やす</button>
    <button type="button" class="decrement" disabled>減らす</button>
 
    <div class="result">数: <strong class="count">0</strong></div>
  </div>
</article>

 body {
    font-family: Helvetica, Arial, Sans-Serif;
    margin: 0;
  }

article {
  display: grid;
  height: 100vh;
  align-items: start;
  width: 100wh;
  justify-content: center;
  padding: 4rem;
  font-size: 24px;
}

.counter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  width: 4.5in;
}

.counter .result {
  grid-row: 1;
  grid-column: 1 / 3;
  text-align: center;
  margin-bottom: 1rem;
}

.counter button {
  grid-row: 2;
}

  button {
    --shadow-color: #000;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    border: 3px solid;
    padding: 0.25em 0.5em;
    box-shadow: 1px 1px 0px 0px var(--shadow-color), 2px 2px 0px 0px var(--shadow-color), 3px 3px 0px 0px var(--shadow-color), 4px 4px 0px 0px var(--shadow-color), 5px 5px 0px 0px var(--shadow-color);
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  button:active {
    box-shadow: 0px 0px 0px 0px;
    top: 5px;
    left: 5px;
  }

button[disabled] {
  --faint-black: #868e96;
  color: var(--faint-black);
  border-color: var(--faint-black);
  --shadow-color: var(--faint-black) !important;
}

import sheet, { mount } from 'https://cdn.corset.dev/v1';


mount(document, class {
  count = 0;
  
  bind() {
    const { count } = this;

    return sheet`
      .counter {
        --count: ${count};
        --inc: ${() => this.count = count + 1};
        --dec: ${() => this.count = count - 1};
      }

      .count {
        text: var(--count);
      }

      .increment {
        event[click]: var(--inc);
      }

      .decrement {
        attr-toggle[disabled]: ${count === 0};
        event[click]: var(--dec);
      }
    `;
  }
});