@charset "UTF-8";

.c-rank-table {
  --color-text-primary: #2C2C2C;
  --color-accent: #CBC08F;

  --font-futura-pt: "futura-pt";
  --font-en: var(--font-futura-pt), sans-serif;
  --font-ja: var(--hirakaku), sans-serif;

  width: var(--container-width, 100%);
  margin-inline: auto;
  font-family: var(--font-ja);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-light);
  line-height: 1.75;
  letter-spacing: 0.02em;
  background-color: var(--white);
}
.c-rank-table__heading {
  --border-width: 2px;
  position: relative;
  margin: 0 auto;
  color: var(--color-accent);
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  border-bottom: var(--border-width) solid currentColor;
}
.c-rank-table__heading::before,
.c-rank-table__heading::after {
  content: "";
  position: absolute;
  top: 0;
  display: inline-block;
  height: var(--border-width);
  background-color: currentColor;
}
.c-rank-table__heading::before {
  left: 0;
}
.c-rank-table__heading::after {
  right: 0;
}
.c-rank-table__heading-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 auto;
}
.c-rank-table__body {
  
}
.c-rank-table__body[data-rank=bronze] {
  /* --color-rank-primary: var(--color-member-rank-bronze); */
  --color-rank-primary: #F4DDD1;
  --color-rank-secondary: #F1D5C7;
  --color-rank-emphasis: #D9AD98;
}
.c-rank-table__body[data-rank=silver] {
  /* --color-rank-primary: var(--color-member-rank-silver); */
  --color-rank-primary: #EAEAEA;
  --color-rank-secondary: #E5E5E5;
  --color-rank-emphasis: #BCBCBC;
}
.c-rank-table__body[data-rank=gold] {
  /* --color-rank-primary: var(--color-member-rank-gold); */
  --color-rank-primary: #F2E7CB;
  --color-rank-secondary: #EFE2C1;
  --color-rank-emphasis: #D3C192;
}
.c-rank-table__body[data-rank=platinum] {
  /* --color-rank-primary: var(--color-member-rank-platinum); */
  --color-rank-primary: #DCEAF6;
  --color-rank-secondary: #D4E5F4;
  --color-rank-emphasis: #BBCFE2;
}
.c-rank-table__body[data-rank=diamond] {
  /* --color-rank-primary: var(--color-member-rank-diamond); */
  --color-rank-primary: #F2E4F4;
  --color-rank-secondary: #EFDEF1;
  --color-rank-emphasis: #D9C5DB;
}
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-rank-table {
    --container-width: calc(355 *(100vw / 375));
    --inline-padding: calc(25 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
    padding: calc(30 *(100vw / 375)) calc(15 *(100vw / 375));
  }
  .c-rank-table__inner {
    margin-top: calc(20 *(100vw / 375));
  }
  .c-rank-table__heading {
    width: 100%;
    margin-top: calc(33.5 *(100vw / 375));
    padding: calc(54 *(100vw / 375)) calc(5 *(100vw / 375)) calc(22 *(100vw / 375));
    font-size: calc(19 *(100vw / 375));
  }
  .c-rank-table__heading::before,
  .c-rank-table__heading::after {
    width: calc(132 *(100vw / 375));
  }
  .c-rank-table__heading-ribbon {
    top: calc(-33.4 *(100vw / 375));
    width: calc(60 *(100vw / 375));
  }
  .c-rank-table__point-usage {
    font-size: calc(11 *(100vw / 375));
    font-weight: var(--font-weight-semibold);
    line-height: 2;
    letter-spacing: 0.02em;
  }
  .c-rank-table__classes {
    display: grid;
    grid-template-columns: 100%;
    gap: 3rem;
    margin-top: 3rem;
  }
  .c-rank-table__body {
    width: 100%;
    border-collapse: separate;
    border-spacing: calc(3 *(100vw / 375));
  }
  .c-rank-table__body :is(th, td) {
    vertical-align: middle;
    font-weight: var(--font-weight-semibold);
  }
  .c-rank-table__body th {
    text-align: center;
  }
  .c-rank-table__body thead th {
    height: calc(50 *(100vw / 375));
    font-size: calc(17 *(100vw / 375));
    background:
      linear-gradient(
        to bottom right,
        transparent 50%,
        rgb(from var(--color-rank-primary) r g b / 25%) 50%
      ),
      var(--color-rank-primary);
    background-blend-mode: multiply;
  }
  .c-rank-table__body tbody :is(th, td) {
    padding: calc(10 *(100vw / 375)) calc(7 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }
  .c-rank-table__body tbody th {
    width: calc(80 * (100vw / 375));
    background-color: var(--color-rank-secondary);
  }
  .c-rank-table__body tbody td {
    background-color: rgb(from var(--color-rank-primary) r g b / 15%);
  }
  .c-rank-table__body tbody b {
    font-family: var(--font-futura-pt), var(--font-ja);
    font-size: calc(22 *(100vw / 375));
    color: var(--color-rank-emphasis);
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .c-rank-table__body tbody tr:first-of-type b {
    font-size: calc(18 *(100vw / 375));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-rank-table {
    --container-width: 120rem;
    padding: 4rem 6.6rem 5rem;
    font-size: 1.4rem;
  }
  .c-rank-table__inner {
    margin-top: 5rem;
  }
  .c-rank-table__heading {
    width: 100rem;
    margin-top: 3.9rem;
    padding: 5.6rem 2rem 2rem;
    font-size: 2.6rem;
  }
  .c-rank-table__heading::before,
  .c-rank-table__heading::after {
    width: 46.5rem;
  }
  .c-rank-table__heading-ribbon {
    top: -4rem;
    width: 7rem;
  }
}