@charset "utf-8";

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-wheel.png);
  background-blend-mode: normal, normal;
  .night & {
    background-blend-mode: hard-light, hard-light;
  }
  @media screen and (width <= 735px){
    background-size: auto, 100%;
    background-position-x: 0, 15vw;
  }
}
/* // Layout
---------------------------------------------------------------------------------------------------- */
@media screen and (width >= 1400px){
  body {
    grid-template-columns: minmax(0, 1fr) minmax(auto, 1800px) minmax(0, 1fr);
  }
  header nav {
    max-width: 1800px;
  }
  article{
    max-width: 1760px;
    display: grid;
    grid-gap: 0 1.2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    align-items: start;
    padding: 0 1.2rem;
    position: relative;
  }
  #area-name, #tags {
    grid-column: span 2;
  }
  #column-skills {
    grid-row: span 3;
  }
}

/* // Font
---------------------------------------------------------------------------------------------------- */
#character-name,
.words {
  font-family: var(--base-font-family-min);
}
#character-name rt {
  font-family: Arial,var(--base-font-family-min);
}
#level dd {
  font-family: 'Verdana';
}

#classes dd,
#area-items dd,
#area-items td,
#battle td,
#battle th div,
#other-rolls tbody th small,
#levelup td {
  font-family: var(--font-proportional);
}
#history table {
  font-family: "Arial",var(--base-font-family-pr);
}
#cashbook p {
  font-family: var(--base-font-family-mono);
}

/* // AreaTag
---------------------------------------------------------------------------------------------------- */
#tags .stage {
  font-size: 90%;
}

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 56.7rem;
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: 1.9fr 0.5fr 0.5fr 2.115fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "CLS   CLS  EXP  IMG"
    "sSTT sSTT  LVL  IMG"
    "STT   STT  STT  IMG"
    "LPT   LPT  LPT  IMG"
  ;
  @media screen and (width <= 767px){
    grid-gap: calc(var(--box-v-gap) / 2) calc(var(--box-h-gap) / 2);
    grid-template-columns: 1.9fr 0.5fr .5fr 2.1fr;
    grid-template-areas:
      "CLS   CLS  EXP  IMG"
      "sSTT sSTT  LVL  IMG"
      "STT   STT  STT  IMG"
      "LPT   LPT  LPT  IMG"
    ;
  }
  @media screen and (width <= 735px){
    display: grid;
    grid-template-columns: 1.5fr 0.8fr .6fr 2.1fr;
    grid-template-areas:
      "CLS   CLS  CLS  IMG"
      "LPT   LPT  LPT  IMG"
      "sSTT  EXP  LVL  IMG"
      "STT   STT  STT  STT"
    ;
  }
  #image-none,
  #image     { grid-area: IMG; }
  #personal  { grid-area: PER; }
  #classes   { grid-area: CLS; }
  #status    { grid-area: STT; }
  #sub-status{ grid-area: sSTT; }
  #level     { grid-area: LVL; }
  #exp       { grid-area: EXP; }
  #lifepath  { grid-area: LPT; }
}


/* Classes */
#classes {
  display: grid;
  grid-template-columns: 1fr 1fr .7fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;

  & dl:nth-child(even) {
    border-top-width: 1px;
  }
  & dl:nth-child(n+3) {
    border-left-width: 1px;
    border-left-style: solid;
  }
  & dd span {
    display: inline-block;
  }
  & dd span.thin {
    margin-left: -10%;
    margin-right: -10%;
    transform: scaleX(0.8);
    line-height: 1;
  }
}

/* Status */
#status {
  display: grid;
}
#status table {
  table-layout: auto;
}
#status table thead {
  white-space: nowrap;
}
#status table thead th span {
  display: inline-block;
  margin-top: .3em;
  margin-bottom: .3em;
  transform: scaleY(calc(1/0.8));
  font-size: 80%;
  vertical-align: bottom;
}
#status table tbody th {
  width: 3em;
  padding: .3em 0em;
  white-space: nowrap;
}
#status table tbody td {
  &:nth-child(2) { width: 15%; }
  &:nth-child(3) { width: 3em; }
  &:nth-child(4) { width: 2.8em; }
  &:nth-child(5) { width: 2.8em; }
  &:nth-child(6) { width: 2.5em; }
  &:nth-child(7) { width: 15%; }
  &:nth-child(8) { width: 2.5em; }
  &:nth-child(9) { width: 20%; }

  &:nth-child(2),
  &:nth-last-child(3),
  &:nth-last-child(1) {
    position: relative;
    font-size: 1.15em;
    font-weight: bold;
    &::before {
      content: "";
      position: absolute;
      top   : 2px;
      left  : 2px;
      right : 2px;
      bottom: 2px;
      border-width: 1px;
      border-style: solid;
      border-color: var(--box-emphasis-border-color);
      border-radius: 5px;
    }
  }
  &:nth-last-child(1) {
    padding-right: 2em;
    > span {
      position: absolute;
      right: 5%;
      bottom: 3px;
      font-size: 80%;
      font-weight: normal;
      margin-left :auto;
    }
    > span b {
      font-size: calc(1em/0.82);
      font-weight: normal;
    }
  }
}

/* Sub-Status */
#sub-status {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  grid-template-rows: auto auto;
  white-space:nowrap;
  @media screen and (width <= 735px){
    grid-template-columns: 1fr 1fr;
  }
}
#sub-status dl#hp,
#sub-status dl#mp {
  border-right-width: 1px;
  border-right-style: solid;
}
#sub-status dl#fate {
  display: grid;
  grid-template-columns: 1fr 6.5em;
  @media screen and (width <= 735px){
    grid-column: span 2;
    border-top-width: 1px;
    border-top-style: solid;
  }
  & dt {
    grid-column: span 2;
  }
  & dd:last-child {
    grid-column: 2;
    grid-row: 2;
    font-size: 85%;
    align-self: end;
  }
}
#sub-status dd b {
  font-weight:normal;
  font-size: 115%;
  display: inline-block;
  transform: scaleY(1.1);
}

/* Level */
dl#level {
  & dt {
    padding-top: .25em;
    line-height: 1;
    font-size: 80%;
  }
  & dd {
    font-size: 180%;
    line-height: 1;
    text-align: right;
    margin: -.3em .2em 0 0;
    white-space: nowrap;
  }
  @media screen and (width <= 735px){
    & {
      display: grid;
    }
    & dd {
      font-size: 200%;
      text-align: center;
      margin: -.3em .0 0 0;
    }
  }
}

/* EXP */
#exp {
  display: grid;
}
#exp dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: end;
  margin: 0 .5rem;
  line-height: 1;
  white-space: nowrap;

  & > *:not(:last-of-type) {
    border-width: 0 0 .1rem;
    border-style: solid;
  }
  & dt {
    grid-column: 1;
    font-size: 80%;
    padding: 0 0 .3rem;
  }
  & dd {
    grid-column: 2;
    text-align: right;
    font-size: 120%;
    padding: .3rem 0 .1rem;
  }
}

/* Lifepath */
#lifepath {
  align-self: end;
}
#lifepath dl#home {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  text-align: right;
  margin-top: -1.2em;
  margin-left: 5.5em;
  margin-right: .3em;
  & dt {
    white-space: nowrap;
  }
  & dt::after {
    content: ":";
  }
  & dd {
    text-align: right;
  }
}
#lifepath table {
  border-top-width: 1px;
  border-top-style: solid;
  & th {
    width: 7em;
    padding: .3rem 0 0 .3rem;
    line-height: 1;
    border-bottom: hidden;
    text-align: left;
  }
  & td.comment {
    font-size: 93%;
  }
}

/* // Area-Items
---------------------------------------------------------------------------------------------------- */
#items-and-money {
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  margin-top: var(--box-v-gap);
}
#weight {
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#money {
  border-bottom-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#items {
  grid-column: span 3;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-left-radius: 0;
  
  & i.weight {
    justify-content: space-between;
    min-width: 3.4em;
    margin: 0 1px;
    padding-left: .4em;
    white-space: nowrap;
    &::before {
      content: "\e13d";
      font-family: "Material Symbols Outlined";
      font-variation-settings: 'FILL' 1;
      transform: scale(1.2) translateX(-.1em);
    }
  }
}

#relations {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  align-items: start;
  margin-top: var(--box-v-gap);
}
#guild > .box:not(:first-child) {
  border-top-width: 1px;
}
#connections table {
  margin-top: -1.2em;
  & col.name     { width: 16em; }
  & col.relation { width: 5.2em; }
  & tbody td.note {
    font-size: 93%;
  }
}
#geises {
  grid-column: span 2;
  & table {
    margin-top: -1.2em;
    & col.name  { width: 16em; }
    & col.num   { width:  5em; }
  }
}
@media screen and (width <= 735px){
  #guild,
  #connections {
    margin-top: var(--box-v-gap);
  }
}

/* // Area-Equipments
---------------------------------------------------------------------------------------------------- */
#area-armaments {
  margin-top: var(--box-v-gap);
}
#area-armaments > .box:not(:first-child) {
  margin-top: var(--box-v-gap);
}

#battle table {
  > colgroup {
    .head  { width:   3em; }
    .name  { width:  10em; }
    .weight{ width: 3.2em; }
    .acc   { width: 2.8em; }
    .atk   { width: 2.8em; }
    .eva   { width: 2.8em; }
    .def   { width: 2.8em; }
    .mdef  { width: 2.8em; }
    .ini   { width: 2.8em; }
    .move  { width: 2.8em; }
    .range { width: 2.8em; }
    .usage { width: 2.8em; }
    .lv    { width: 1.8em; }
    .note  { width: auto; }
  }
}
#battle thead {
  & th:not(:first-child) {
    font-size: 87%;
  }
  & th div {
    display: none;
    margin-top: .2em;
    font-size: 90%;
    opacity: 0.5;
    line-height: 1.1;
  }
}
#battle tbody th {
  border-right-style: solid;
  background-color: transparent;
  &:not([colspan]) {
    border-top: hidden;
    border-bottom: hidden;
    font-size: 87%;
  }
  & span {
    display: inline-block;
    margin-left : -.6em;
    margin-right: -.6em;
    transform: scaleX(0.75);
    white-space: nowrap;
  }
}
#battle td .item-name {
  display: block;
  margin: 0 -6%;
  transform: scaleX(0.88);
}
#battle td.note {
  padding-left: .1em;
  font-size: 87%;
}
#battle .total td {
  border-left-width: 1px;
  border-left-style: dotted;
  background: transparent;
  &.right {
    padding-right: 2px;
    font-weight: bold;
  }
}
#battle td i.type {
  margin-right: .5em;
  font-weight: bold;
  font-size: 100%;
  height: 1.4em;
}
#armaments .total span[data-name] {
  display: grid;
  grid-template-columns: .7em 1fr;
  margin-bottom: -.2em;
  &::before {
    content: attr(data-name);
    display: block;
    transform: scale(0.7, 0.8);
  }
}

@media screen and (width <= 735px){
  #battle table col:nth-child(n) {
    width: unset;
  }
  #battle table thead tr,
  #battle table tbody tr,
  #battle table tfoot tr {
    display: grid;
    grid-template-columns: 3em auto 3.3em 3em 3em 3em 3em 3em 3em 3em 3em;
  }
  #battle table thead th[colspan="2"] {
    grid-column: span 2;
  }
  #battle table thead th:last-child {
    display: none;
  }
  #battle table tbody td:last-child {
    grid-column: 3 / -1;
    border-top-width: 1px;
    border-top-style: solid;
  }
  #battle table tbody *:nth-child(-n+2) {
    grid-row: span 2;
  }
  #battle table tbody tr > * {
    border-left-width: 0;
  }
  #battle table tbody tr > *:nth-last-child(-n+2) {
    border-right-width: 0;
  }
  #battle table tbody tr {
    border-bottom-width: 0px;
  }
  #battle table tbody.total {
    position: relative;
  }
  #battle table tbody.total tr:first-child {
    grid-template-rows: 1fr 1fr;
  }
  #battle table tbody.total tr th {
    grid-row: span 2;
  }
  #battle table tbody.total tr > td {
    border-left-width: 0;
    grid-row: span 1;
  }
  #battle table tbody.total tr > td.note {
    grid-column: 4 / -1;
  }
  #battle table tbody tr.armour-weight {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 0;
  }
  #battle table tbody tr.armour-weight > td:nth-child(1) {
    grid-column: 2 / 3;
    border-right-width: 1px;
  }
  #battle table tbody tr.armour-weight > td:nth-child(2) {
    border-top: 0;
    grid-column: 3 / 4;
    border-right-width: 1px;
    border-right-style: solid;
  }
  #battle-rolls table thead th[colspan="3"] {
    grid-column: span 3;
  }
  #battle-rolls table tbody td[colspan="2"] {
    grid-column: span 2;
  }
  #battle-rolls table tbody td:last-child {
    grid-column: 4 / -1;
  }
  #battle-rolls table tfoot th {
    grid-column: span 3;
  }
}
#battle-rolls {
  border-top-width: 1px;
}
#battle-rolls tbody {
  & .right {
    padding-right: .2em;
  }
  & .battle-dice:not(:empty)::after {
    content: "D";
    font-size: 87%;
  }
}
#battle-rolls tfoot td {
  padding-top: 4px;
  padding-bottom: 1.2em;
  position: relative;
  font-size: 120%;
  font-weight: normal;
  line-height: 1.2;

  &:nth-child(n+2):not(:nth-child(n+9))::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 1px;
    right: 1px;
    bottom: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--box-emphasis-border-color);
    border-radius: 5px;
    pointer-events: none;
  }
  > span {
    display: block;
    position: absolute;
    right: 0;
    bottom: .2em;
    font-size: 80%;
    line-height: 1;
    text-align: right;
    margin-right: 4px;
  }
  > span b {
    font-size: calc(1em/0.82);
    font-weight: normal;
  }
  > b {
    display: grid;
    grid-template-columns: .6em 1fr;
    font-weight: normal;
    white-space: nowrap;
  }
  > b + b {
    border-top-width: 1px;
    border-top-style: dotted;
  }
  > b::before {
    content: attr(data-name);
    display: block;
    transform: scale(0.6, 0.7);
  }
}

#other-rolls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 5px;
}
#other-rolls h2 {
  grid-column: span 2;
}
#other-rolls table {
  margin-top: -1.2em;

  &:first-of-type {
    border-bottom-style: hidden;
    border-right-style: none;
    & tbody {
      border-right-width: 1px;
      border-right-style: solid;
    }
  }
  &:last-of-type {
    border-left-style: none;
    & tbody {
      border-left-width: 1px;
      border-left-style: solid;
    }
  }
  & col:first-child { width: 44%; }
  & col:last-child  { width: 26%; }

  & thead th {
    white-space: nowrap;
  }
  & tbody th[rowspan="4"] {
    width: 1rem;
  }
  & tbody th small {
    float: right;
    padding-top: calc(1em/0.87 - 1em);
    padding-right: .2em;
    font-size: 87%;
    font-weight: normal;
  }
  & tbody td.roll {
    position: relative;
    font-size: 1.15em;
    padding-right: 2em;
  }
  & tbody td.roll::before {
    content: "";
    position: absolute;
    top   : 2px;
    left  : 2px;
    right : 2px;
    bottom: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--box-emphasis-border-color);
    border-radius: 5px;
    pointer-events: none;
  }
  & tbody td.roll > span {
    position: absolute;
    right: 5%;
    bottom: 3px;
    font-size: 80%;
    margin-left :auto;
  }
  & tbody td.roll > span b {
    font-size: calc(1em/0.82);
    font-weight: normal;
  }
}


/* // Skills
---------------------------------------------------------------------------------------------------- */
#skills {
  position: relative;
  margin-top: var(--box-v-gap);
  @media screen and (width >= 1400px){
    margin-top: 0;
  }
  @media screen and (1400px <= width <= 1600px){
    .shorten { display: none; }
  }
}
#skills table thead th {
  vertical-align: bottom;

  &:nth-child(n+4) { font-size: 90%; }

  &:nth-child(1) { width: 3.5em; } /* 取得元 */
  &:nth-child(2) { width: 3.0em; } /* 分類 */
  &:nth-child(3) { width:  auto; } /* 名称 */
  &:nth-child(4) { width: 2.2em; } /* Lv */
  &:nth-child(5) { width: 8.4em; } /* タイミング */
  &:nth-child(6) { width: 5.8em; } /* 判定 */
  &:nth-child(7) { width: 5.8em; } /* 対象 */
  &:nth-child(8) { width: 4.8em; } /* 射程 */
  &:nth-child(9) { width: 2.4em; } /* コスト */
  &:nth-child(10) { width:10.8em; } /* 使用条件 */
  @media screen and (1400px <= width <= 1680px){
    &:nth-child(6) { width: 5.2em; } /* 対象 */
    &:nth-child(8) { width: 4.2em; } /* 射程 */
    &:nth-child(9) { width: 3.1em; } /* コスト */
  }
  @media screen and (1400px <= width <= 1600px){
    &:nth-child(5) { width: 5.4em; } /* タイミング */
  }

  &:nth-child(9) > div.thin {
    display: block;
    margin: 0 -.5em;
    transform: scaleX(calc(2/3));
  }
}

#skills table tbody td {
  &:nth-child(n+2) {
    font-family: var(--font-proportional);
    font-feature-settings: "palt";
  }
  &:nth-child(1) {  } /* 取得元. */
  &:nth-child(2) {  } /* 分類. */
  &:nth-child(3) { font-weight: bold; } /* 名称 */
  &:nth-child(4) {  } /* Lv */
  &:nth-child(5) { font-size: 90%; } /* タイミング */
  &:nth-child(6) { font-size: 90%; } /* 判定 */
  &:nth-child(7) { font-size: 90%; } /* 対象 */
  &:nth-child(8) { font-size: 90%; } /* 射程 */
  &:nth-child(9) {  } /* コスト */
  &:nth-child(10){ font-size: 90%; } /* 使用条件 */
}


#skills table tbody td.note {
  padding-left: .5rem;
  display: none;
  &:empty::before {
    content: '　';
  }
  & span.right {
    float: right;
    font-size: 90%;
  }
}
#skills table tbody:hover td.note,
#skills[data-full-open="true"] table tbody td.note {
  display: table-cell;
}

#skills table tbody td.type,
#skills table tbody td.category {
  padding: 0;
  overflow: hidden;
  position: relative;
  > i {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    font-style: normal;
    font-weight: bold;
    line-height: 1;
    &.sk-general,
    &.sk-race,
    &.sk-style,
    &.sk-faith,
    &.sk-geis,
    &.sk-add,
    &.sk-another {
      inset: 0;
      font-size: 87%;
    }
    &.sk-add {
      font-size: 80%;
    }
    &.sk-race    { color: hsl(120,50%,30%); }
    &.sk-style   { color: hsl( 60,50%,30%); }
    &.sk-faith   { color: hsl( 80,50%,30%); }
    &.sk-general { color: hsl(185,50%,30%); background-color: hsla(185,100%, 85%,0.4); }
    &.sk-geis    { color: hsl(270,50%,30%); background-color: hsla(270,100%, 90%,0.4); }
    &.sk-add     { color: hsl(310,20%,30%); background-color: hsla(310, 20%, 80%,0.4); }
    &.sk-another { color: hsl(  0,50%,30%); background-color: hsla(  0,100%, 85%,0.4); }
    @media screen {
      .night & {
        &.sk-race    { color: hsl(120,30%,70%); }
        &.sk-style   { color: hsl( 60,30%,70%); }
        &.sk-faith   { color: hsl( 80,30%,70%); }
        &.sk-general { color: hsl(185,30%,80%); background-color: hsla(185,100%, 25%,0.4); }
        &.sk-geis    { color: hsl(270,30%,80%); background-color: hsla(270,100%, 20%,0.4); }
        &.sk-add     { color: hsl(310,20%,80%); background-color: hsla(310, 20%, 20%,0.4); }
        &.sk-another { color: hsl(  0,20%,80%); background-color: hsla(  0, 20%, 20%,0.4); }
      }
    }
    &.sk-class,
    &.sk-power {
      inset: -15% -25%;
      transform: scale(calc(1/1.5), 0.7);
    }
    &.sk-power { color: hsl( 40,50%,30%); background-color: hsla( 40,100%, 85%,0.4); }
    @media screen {
      .night &.sk-power{ color: hsl( 40,30%,70%); background-color: hsla( 40,100%, 20%,0.4); }
    }
    &.ct-magic,
    &.ct-alchemy,
    &.ct-song,
    &.ct-role,
    &.ct-other {
      inset: -10%;
      transform: scale(calc(1/1.2));
    }
    &.ct-magic small {
      display: block;
      margin-top: 1px;
      font-size: 82%;
    }
    &.ct-magic   { color: hsl(250,100%, 30%); }
    &.ct-alchemy { color: hsl( 30,100%, 30%); }
    &.ct-song    { color: hsl(350,100%, 30%); }
    &.ct-role    { color: hsl(140,100%, 30%); }
    @media screen {
      .night & {
        &.ct-magic   { color: hsl(250,100%, 80%); }
        &.ct-alchemy { color: hsl( 30,100%, 80%); }
        &.ct-song    { color: hsl(350,100%, 80%); }
        &.ct-role    { color: hsl(140,100%, 80%); }
      }
    }
  }
}
#skills p.right {
  margin: 0;
  padding-right: 5px;
  font-size: 87%;
  opacity: 0.9;
}

@media screen and (width <= 735px){
  #skills table {
    > thead {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
    > thead tr,
    > tbody tr {
      display: grid;
      grid-template-columns: 4em 3.4em 1.8em 5.2em 5.2em 5.5em 4.5em 2.1em auto;
      border-width: 0 0 1px;
    }
    > tbody tr:last-child { border: 0; }
    > thead th:nth-child(n) {
      width: auto;
    }
    > thead th:nth-child(3) {
      display: none;
    }
    > tbody td[rowspan] {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    > tbody td {
      font-size: 100% !important;
      border-width: 0 0 0 1px;
      border-style: dotted;
    }
    > tbody td.name {
      grid-row: 1; grid-column: 1 / span 9;
      text-align: left;
      padding-left: .5rem;
      border-width: 0 0 1px;
      border-style: solid;
    }
    > tbody td.note {
      grid-row: 1; grid-column: 1 / span 9;
      border-width: 0 0 1px;
      border-style: solid;
    }
    > tbody td:first-child { border-left: 0; }
    > tbody td:last-child  { border-right: 0; }
    > tbody td span.shorten {
      display: none !important;
    }
    > tbody td span.thin,
    > tbody td span.thiner,
    > tbody td span.thinest {
      transform: scaleY(calc(1/0.9)) !important;
      font-size: 90% !important;
    }
  }
}

/* // LvUpHistory
---------------------------------------------------------------------------------------------------- */
#levelup {
  margin-top: var(--box-v-gap);
}
#levelup col {
  &:nth-child(1) { width: 2.2em; }
  &:nth-child(n+2):not(:nth-child(n+9)) { width: 2em; }
  &:nth-child(9) { width: 8.1em; }
  &:nth-child(n+10) { width: auto; }
}
#levelup thead th {
  vertical-align: bottom;
}
#levelup thead tr:last-child th {
  font-size: 87%;
}
#levelup tbody tr#lvup1 + tr td {
  background-color: transparent;
}
#levelup tbody td.checked {
  position: relative;
  margin: 0;
  padding: 0;
  &::before {
    content: "\e5ca";
    font-family: "Material Symbols Outlined";
    font-variation-settings: 'wght' 300, 'FILL' 1;
    display: grid;
    align-items: center;
    width: 1em;
    height: 1em;
    margin: auto;
    background-color: hsla(
      var(--box-head-bg-color-h, 0),
      calc( var(--box-head-bg-color-s,   0%) * 0.6 ), 50%, 0.7
    );
    border-radius: 5px;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1;
    color: white;
    text-shadow: 0 0 0 white;
  }
}
#levelup tbody td.skill {
  font-size: 92%;
}

/* // Free-Memo
---------------------------------------------------------------------------------------------------- */
#free-note,
#free-history{
  margin-top: var(--box-v-gap);
}


/* // History
---------------------------------------------------------------------------------------------------- */
#history {
  margin-top: var(--box-v-gap);
}
#history table {
  > thead {
    .exp    { width: 4.6em; } /* 成長点 */
    .pay    { width: 4.6em; } /* 上納点 */
    .money  { width: 4.5em; } /* ゴールド */
  }
  > tbody tr td.pay:not(:empty)::before {
    content: "-";
    float: left;
    margin-left: 2px;
    font-size: 1.1rem;
  }
  & tr td.money {
    text-align: right;
    word-break: normal;
    &:not(:empty)::after {
      content: "G";
      margin-left: 2px;
      font-size: 1.1rem;
    }
  }
}



/* // Cashbook
---------------------------------------------------------------------------------------------------- */
#cashbook {
  margin-top: var(--box-v-gap);
  height: max-content;
  overflow: hidden;
}
#cashbook > div {
  max-height: 16em;
  overflow: auto;

  @media print {
    max-height: initial;
  }
}
#cashbook p {
  line-height: 1.5;
  white-space: pre-wrap;
}
#cashbook b.cash {
  padding: 2px 0;
  font-weight: normal;
  background: linear-gradient(to top, rgba(0,100,255,0.5) 0rem, rgba(0,100,255,0.3) .5rem, transparent .5rem);
  &.plus {
    background: linear-gradient(to top, rgba(0,255,100,0.5) 0rem, rgba(0,255,100,0.3) .5rem, transparent .5rem);
  }
  &.minus {
    background: linear-gradient(to top, rgba(255,100,0,0.5) 0rem, rgba(255,100,0,0.3) .5rem, transparent .5rem);
  }
}

/* ////////// LayerEnd ////////// */
}