@charset "utf-8";

/* // キャラクター
---------------------------------------------------------------------------------------------------- */
#regulation dl:first-of-type {
  display: grid;
  grid-template-columns: max-content 2em max-content 6em max-content 6em 1fr;
  grid-template-rows: auto;
  margin: var(--box-v-gap);
  & dt {
    padding-left: .5em;
  }
}

body:not(.class-hound) .h-only {
  display: none !important;
}
body:not(.class-owner) .o-only {
  display: none !important;
}
body:not(.normal-bullet) .normal-only {
  display: none !important;
}
body:not(.gospel-bullet) .gospel-only {
  display: none !important;
}

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

    grid-template-areas:
      "IMG "
      "MAK "
      "CLS "
      "PER "
    ;
  }
}
#make-type {
  width: max-content;
  padding: 1px;
  > label {
    &:has(:checked){
      background-color:  var(--box-base-bg-color);
    }
  }
}

#classes {
  display: block;
}
#classes table thead th:nth-child(1) { width: 8em; }
#classes table thead th:nth-child(2) { width: 7em; }

#classes table tbody th {
  border-right-style: hidden;
  text-align: right;
  padding-right: .5em;
}
#classes table tbody th[colspan] {
  border-right-style: dotted;
}
#classes table tbody tr.total td {
  font-size: 110%;
  font-weight: bold;
}
#classes table tbody input[type="number"] {
  width: 5em;
}
#classes table 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: 4.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;
}
.partner-table > dl.partner-from > dt,
.partner-table > dl.partner-to > dt {
  grid-row: span 2;
}
.partner-table > dl.partner-from > dd {
  border-right-width: 1px;
  border-right-style: solid;
}
.partner-table > dl.partner-from > dd dl,
.partner-table > dl.partner-to > dd dl {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}
.class-hound #partner2area.partner-table > dl.partner-from dd dl,
.class-hound #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; }
    & dt:nth-of-type(7) { grid-column: 1 / span2; grid-row: 9; }
    & dd:nth-of-type(7) { grid-column: 1 / span2 ; grid-row: 10; }
  }
}

#kizuna {
  > table {
    & tr:not(:last-child) {
      border-bottom: 0;
    }
  }
}
#kizuato {
  margin-top: var(--box-v-gap);
}
#kizuato table td.name input {
  width: calc(100% - 6em);
  max-width: 20em;
}
#kizuato table tbody th {
  border-top-width: 1px;
  border-top-style: dotted;
}
#kizuato table tbody td.left {
  padding-left: 0;
}

#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; }
}