@charset "utf-8";

/* // キャラクター
---------------------------------------------------------------------------------------------------- */
#regulation dl:first-of-type {
  grid-template-columns: max-content 2em max-content 6em max-content 6em 1fr;
  & dt {
    grid-row: 1;
    padding-left: .5em;
    align-self: center;
  }
  & dd {
    grid-row: 1;
    font-size: 1.2rem;
    align-self: center;
  }
}

body:not(.type-vampire) .v-only { display: none; }
body:not(.type-human  ) .h-only { display: none; }

#area-status {
  min-height: 0%;
  margin: 0 0 var(--box-v-gap);
  grid-template-columns: 2fr 1.3fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "FAC IMG"
    "PER IMG"
    "SCR IMG"
  ;
  @media screen and (width <= 735px){
    grid-template-columns: 1fr;
    grid-gap: var(--box-v-gap) var(--box-h-gap);
    grid-template-rows: auto auto 1fr auto;

    grid-template-areas:
      "IMG "
      "FAC "
      "PER "
      "SCR "
    ;
  }
}
#area-status #personal dl {
  display: grid;
  grid-template-columns: 10em 1fr;

  &:nth-child(-n+2) {
    grid-template-columns: 1fr;
  }
  & input[name="ageApp"],
  & input[name="age"],
  & input[name="gender"] {
    width: 7em;
  }
}

#level-value {
  display: inline-block;
  margin: 0 .3em 0;
  transform: scale(1.5) translateY(0.1em);
}
#factors {
  display: block;
}
#factors h2 {
  margin-top: 0;
  padding-bottom: 0;
  border-top: 0;
}
#factors table {
  margin-top: -1em;
}
#factors thead {
  & th { min-height: 1em; }
  & th:nth-child(1) { width: 7em; }
  & th:nth-child(2) { width: 8em; }
  & th:empty::before { content:"　"; }
}
#factors th div.small {
  margin-top: 1px;
  letter-spacing: 1px;
  font-family: var(--font-proportional);
  &::before { content:"("; }
  &::after  { content:")"; }
}
#factors th i {
  font-family: var(--base-font-family-min);
  font-style: normal;
}
#factors table tbody th {
  border-right-style: hidden;
  text-align: right;
  padding-right: .5em;
  &[colspan] {
    border-right-style: dotted;
  }
}
#factors tbody tr.total td {
  font-size: 110%;
  font-weight: bold;
}
#factors tbody input[type="number"] {
  width: 5em;
}
#factors tbody input[readonly] {
  border-style: dotted;
  background-color: transparent;
}

@media screen and (width <= 735px){
  #status {
    grid-template-columns: 1fr 2fr;
  }
  #status > dl:last-child {
    grid-column: span 2;
    border-width: 1px 0 0;
    border-style: solid;
  }
}
.partner-edit {
  margin-top: var(--box-v-gap);
}
.partner-data    { grid-area: DATA; }
.partner-from    { grid-area: FROM; }
.partner-to      { grid-area:   TO; }
.partner-promise { grid-area: PRMS; }
.partner-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "DATA DATA"
    "FROM   TO"
    "PRMS PRMS"
  ;
}
.partner-table > dl {
  display: grid;
  grid-template-columns: 3.5em 1fr;
  border-top-width: 1px;
  border-top-style: solid;
}
.partner-table > dl > dt {
  display: grid;
  place-items: center;
  text-align: center;
  border-right-width: 1px;
  border-right-style: dotted;
}
.partner-table > dl > dd {
  grid-column: 2;
  padding: .2rem 0;
  text-align: left;
}
.partner-table > dl > dd + dd {
  border-top-width: 1px;
  border-top-style: dotted;
}
.partner-table > dl > dd dl dt {
  padding: .2rem 0 0 .2rem;
}
.partner-table > dl > dd dl dt small {
  font-size: unset;
  font-weight: normal;
}
.partner-table > dl.partner-data > dd dl {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}
.partner-table > dl.partner-data dl dt:nth-of-type(6) { grid-column: 2; grid-row: 3; }
.partner-table > dl.partner-data dl dd:nth-of-type(6) { grid-column: 2; grid-row: 4; }

.partner-table > dl.partner-from,
.partner-table > dl.partner-to {
  grid-template-rows: 1fr max-content;
  > dt {
    grid-row: span 2;
  }
  > dd dl {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
  }
}
.partner-table > dl.partner-from > dd {
  border-right-width: 1px;
  border-right-style: solid;
}
.type-vampire #partner2area.partner-table > dl.partner-from dd dl,
.type-vampire #partner2area.partner-table > dl.partner-to dd dl {
  grid-template-rows: auto auto;
}

.partner-table input[readonly] {
  border-color: transparent;
  background: rgba(125,125,125,0.2);
  text-align: center;
}
.partner-table input[readonly]:focus {
  outline: none;
}
@media screen and (width <= 735px){
  .partner-table {
    display: block;
  }
  .partner-table > dl.partner-data > dd dl {
    grid-template-columns: 1fr 1fr;
    & dt:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 1; }
    & dd:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 2; }
    & dt:nth-of-type(2) { grid-column: 1 / span 2; grid-row: 3; }
    & dd:nth-of-type(2) { grid-column: 1 / span 2; grid-row: 4; }
    & dt:nth-of-type(6) { grid-column: 1 ; grid-row: 7; }
    & dd:nth-of-type(6) { grid-column: 1 ; grid-row: 8; }
  }
}

#servant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  .servant-data {
    border-right-width: 1px;
    border-right-style: solid;
  }
  .servant-data dl {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
  }
  @media screen and (width <= 735px){
    display: block;
  }
  #servant-master-term      + dd { grid-row: 2; }
  #servant-class-term       + dd { grid-row: 2; }
  #servant-background-term  + dd { grid-row: 4; grid-column: span 2; }
  .partner-from { grid-column: 2; grid-row: 1; }
}


#bloodarts,
#arts {
  margin-top: var(--box-v-gap);
  > table {
    margin-top: -1rem;
  }
}
#bloodarts table thead th {
  &:nth-child(1) { width: 1.4em; }
  &:nth-child(2) { width: 11em; } /* 名称 */
  &:nth-child(3) { width: 5.5em; } /* タイミング */
  &:nth-child(4) { width: 7.5em; } /* 対象 */
}
#arts table thead th {
  &:nth-child(1) { width: 1.4em; }
  &:nth-child(2) { width: 11em; } /* 名称 */
  &:nth-child(3) { width: 5.5em; } /* タイミング */
  &:nth-child(4) { width: 7.5em; } /* 対象 */
  &:nth-child(5) { width: 8.4em; } /* 代償 */
  &:nth-child(6) { width: 7em; } /* 条件 */
}
#arts table tbody td {
  &:nth-child(n+4):nth-child(-n+7) { font-size: 85%; }
  &:nth-child(n+4):nth-child(-n+7) input { font-size: inherit; padding: 3px 2px; }
}
#bloodarts,
#arts {
  & table thead th.left {
    padding-left: 1rem;
  }
  > table tbody td {
    padding: .3rem 0 .4rem !important;
  }
}

#arts h2:not(:first-child) {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
#arts #arts-scar {
}
#arts #arts-scar td:first-child {
  font-size: 92%;
  font-weight: normal;
}
#arts #arts-scar b.arts-scar-head {
  margin-top: 0;
}
@media screen and (width <= 735px){
  #bloodarts,
  #arts {
    overflow-x: auto;
    > table {
      min-width: 0;
      table-layout: fixed;
    }
  }
  #bloodarts table thead th:last-child,
  #arts table thead th:last-child { width: 16em; } /* 備考 */
  #arts table tbody td:nth-child(n+4):nth-child(-n+7) { font-size: unset; }
}

#history table thead {
  & th.first-child { width: 1.4em; }
  .date       { width:   6em; }
  .title      { width:  12em; }
  .grow       { width:   6em; }
  .gm         { width:   6em; }
  .member     { width:  auto; }
}

@media screen and (width <= 735px){
  #history table  { table-layout: fixed; }
  #history table thead th.title  { width: 12em; }
  #history table thead th.member { width: 16em; }
}