*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --card:#2e2e2e;
  --line:rgba(255,255,255,.12);
  --text:rgb(255,255,255);
  --muted:rgba(255,255,255,.72);
  --head1:#a6e22e;
  --head2:#82b224;
  --chip:#c3e88d;
  --col1: 100px;
  --col2: 100px;
  --headRowH: 44px;
}

html{ height: 100%; }

body{
  margin:0;
  height: 100%;
  overflow: hidden;
  font-family: "Saira Stencil One", sans-serif;
  background-color: var(--card);
  color: var(--text);
}

.wrap{
  max-width:1600px;
  height: 100%;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

h1{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  letter-spacing:.02em;
}

.page-header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.calc-link{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(166,226,46,.2);
  border: 1px solid rgba(166,226,46,.5);
  color: #c3e88d;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}

.calc-link:hover{
  background: rgba(166,226,46,.4);
  color: #fff;
}

.note{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
  line-height: 1.7;
}

.note .shipping-warn{
  color: #ffb74d;
  font-weight: 600;
}

.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 14px;
}

.toolbar input{
  width:min(520px, 100%);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(188,162,236,.04);
  color: var(--text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  outline:none;
}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.table-card{
  flex: 1;
  min-height: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.table-scroll{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 980px;
  font-size: 20px;
  table-layout: fixed;
}

table th, table td{ box-sizing: border-box; }

.col-size{ width: var(--col1); }
.col-qty { width: var(--col2); }
.w-size{ width: var(--col1); }
.w-qty { width: var(--col2); }

tbody td{
  border-bottom:1px solid var(--line);
  padding: 9px 10px;
  white-space:nowrap;
}

tbody tr:hover td{ background: rgba(255,255,255,.04); }

td.left, th.left { text-align:center; }
td.center { text-align:center; }
td.right { text-align:center; font-variant-numeric: tabular-nums; }

tbody td.sticky-col,
tbody td.sticky-col2{
  position: sticky;
  z-index: 3;
  background: #222222;
  border-right: 1px solid rgba(255,255,255,.5);
}

tbody td.sticky-col{ left: 0; }
tbody td.sticky-col2{ left: var(--col1); }

th.sticky-col, td.sticky-col{
  width: var(--col1);
  min-width: var(--col1);
  max-width: var(--col1);
}

th.sticky-col2, td.sticky-col2{
  width: var(--col2);
  min-width: var(--col2);
  max-width: var(--col2);
}

thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #222222;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
  padding: 0 10px;
  height: var(--headRowH);
  line-height: var(--headRowH);
  box-sizing: border-box;
}

thead tr:first-child th{
  top: 0;
  z-index: 6;
  font-size: 14px;
}

thead tr:nth-child(2) th{
  top: var(--headRowH);
  z-index: 6;
  font-size: 16px;
}

thead th[rowspan="2"]{
  top: 0;
  height: calc(var(--headRowH) * 2);
  line-height: calc(var(--headRowH) * 2);
  vertical-align: middle;
}

thead th.sticky-col{
  left: 0;
  z-index: 20;
  background: #222222;
  border-right: 1px solid rgba(255,255,255,.5);
}
thead th.sticky-col2{
  left: var(--col1);
  z-index: 20;
  background: #222222;
  border-right: 1px solid rgba(255,255,255,.5);
}

thead tr:first-child th.sticky-col,
thead tr:first-child th.sticky-col2 {
  z-index: 30;
}

tbody td:nth-child(4),
tbody td:nth-child(6),
tbody td:nth-child(8) {
  border-right: 1px solid rgba(255,255,255,.5);
}

thead tr:first-child th:nth-child(3),
thead tr:first-child th:nth-child(4),
thead tr:first-child th:nth-child(5) {
  border-right: 1px solid rgba(255,255,255,.5);
}

thead tr:nth-child(2) th:nth-child(2),
thead tr:nth-child(2) th:nth-child(4),
thead tr:nth-child(2) th:nth-child(6) {
  border-right: 1px solid rgba(255,255,255,.5);
}

@media (max-width: 560px){
  h1{ font-size:18px; }
  .note{ font-size:12px; }
  table{ font-size:12px; }
  .sticky-col, .sticky-col2{
    position: -webkit-sticky;
    position: sticky;
  }
  .table-scroll{
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }
}

.header-logo{ height: 36px; width: auto; display: block; }