@charset "utf-8";

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-kiz.png);
  background-blend-mode: normal, normal;
  .night & {
    background-blend-mode: hard-light, hard-light;
  }
  @media screen and (width <= 735px){
    background-size: auto, 100%;
  }
}
/* // 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;
    align-items: start;
    padding: 0 1.2rem;
    position: relative;
  }
  #area-name, #tags {
    grid-column: span 2;
  }
  .column-status{
    grid-row: span 2;
  }
  #area-partner {
    grid-column: 2;
    grid-row: 3;
  }

  #kizuna {
    grid-column: 1;
  }
  #area-kizu {
    grid-column: 2;
    grid-row: 4 / span 2;
  }
  #free-note {
    grid-column: 1;
  }
  #enc-bonus {
    grid-column: 2;
    align-self: end;
  }
  aside#sidebar-left,
  aside#sidebar-right {
    display:none;
  }
  aside#sidebar-top,
  aside#sidebar-bottom {
    display: block;
  }
}
/* // Font
---------------------------------------------------------------------------------------------------- */
#history {
  font-family: "Kosugi","Arial",var(--base-font-family-jp);
}
#character-name,
.words {
  font-family: var(--base-font-family-min);
}
#character-name rt {
  font-family: Arial,var(--base-font-family-min);
}

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 56.7rem;
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: 2fr 1.4fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "CLS IMG"
    "STT IMG"
    "PER IMG"
  ;
  @media screen and (width <= 767px){
    min-height: 0%;
    grid-gap: .5rem;
  }
  @media screen and (width <= 735px){
    grid-template-areas:
      "CLS STT"
      "PER IMG"
    ;
  }
  #image-none,
  #image      { grid-area: IMG; }
  #classes    { grid-area: CLS; }
  #hitogara   { grid-area: PER; }
  #status     { grid-area: STT; }
}

#area-status dd:empty::before,
#area-status td:empty::before {
  content: '　';
}

/* Image */
.image, .image-none {
  max-height: 56.7rem;
}
.image-none::after {
  transform: scale(1, 1.5);
}

/* Class */
#classes {
  display: grid;
  grid-template-columns: 1fr 2fr;
  > dl:first-child {
    display: grid;
    grid-template-rows: max-content 1fr;
    border-right-width: 1px;
  }
  > dl > dd {
    display: grid;
    align-items: center;
    white-space: nowrap;
  }
}
#negai dl {
  display: grid;
  grid-template-columns: 1fr .75fr .75fr 1fr;
  > dt {
    align-self: end;
    padding-right: .5em;
    text-align: right;
    font-size: 90%;
  }
  > dd {
    text-align: left;
  }
}

/* Hitogara */
#hitogara {
  display:grid;
  grid-template-rows: max-content auto;
}
#hitogara table {
  table-layout: fixed;
  border-style: solid hidden hidden;
  & th:not(:first-child) { border-left-style: solid; }

  & col:nth-child(1),
  & col:nth-child(3) { width: 7.4em; }
  & col:nth-child(2),
  & col:nth-child(4) { width: auto; }
  & th {
    line-height: 1;
  }
  & td {
    padding: .1em .2em;
    &.comment       { font-size: 93% }
    &:not(.comment) { line-height: 1.3 }
  }
  & th > span.thin {
    display: inline-block;
    margin: 0 -10%;
    transform: scaleX(0.8);
    white-space: nowrap;
  }
  & th > span.thiner {
    display: inline-block;
    margin: 0 -16%;
    transform: scaleX(0.7);
    white-space: nowrap;
  }
  @media screen and (width <= 735px){
    & col:nth-child(1),
    & col:nth-child(3) { width: 6em; }
    & th {
      font-size: 82%;
    }
    & th > span.thin {
      font-size: 1em;
      margin: 0 -10%;
      transform: scaleX(0.8);
    }
  }
}

/* Status */
#status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  white-space:nowrap;
}
#status dl:first-child {
  border-right-width: 1px;
}
#status dl dd b {
  display: inline-block;
  transform: scale(1.2);
  margin-right: .5em;
}
@media screen and (width <= 735px){
  #status dl dd small {
    display: inline-block;
    margin: 0 -5%;
    transform: scaleX(0.9);
  }
}
/* // Kizu
---------------------------------------------------------------------------------------------------- */
/* Kizuna */
#kizuna {
  margin-top: var(--box-v-gap);
}
#kizuna table {
  &,
  & thead,
  & tbody {
    display: block;
  }
  & tr {
    display: grid;
    grid-template-columns: 1.8em 14em auto 2.4em 2.4em;
    border-bottom-width: 0;
  }
  & tr th.left {
    padding-left: .5em;
  }
  & tr td {
    border-right: 0;
    border-bottom-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  & tr td.comment {
    justify-content: left;
  }
  & tr td:first-child {
    border-left: 0;
  }
  & tbody td:nth-last-child(1),
  & tbody td:nth-last-child(2) { color:transparent; }
  
  & tr.hibi,
  & tr.hibiware {
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 0px;
    background-size: 7em;
  }
  & tr.hibi     { background-image: url(../img/hibi.png); }
  & tr.hibiware { background-image: url(../img/hibiware.png); }
  @media screen {
    .night & tr.hibi     { background-image: url(../img/hibi-w.png); }
    .night & tr.hibiware { background-image: url(../img/hibiware-w.png); }
  }
  
  & tbody    { counter-reset: kizuna; }
  & tbody tr { counter-increment: kizuna; }
  & tbody tr td:first-child::before {
    content: counter(kizuna);
  }
  @media screen and (width <= 736px){
    & tr {
      display: grid;
      grid-template-columns: 1.8em 14em auto 1.8em 1.8em;
    }
    & td.comment {
      font-size: 93%;
    }
    & thead th:nth-last-child(1),
    & thead th:nth-last-child(2) {
      font-size: 82%;
      vertical-align: bottom;
    }
    & tr.hibi,
    & tr.hibiware {
      background-position-x: calc(100% + .4em);
      background-size: 6em;
    }
  }
}


/* Area-Kizu */
#area-kizu {
  align-self: end;
}
/* Shougou */
#shougou {
  margin-top: var(--box-v-gap);
  & dl {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr max-content 1fr;
    border-top-width: 1px;
    border-top-style: solid;
    & dt {
      padding-top: .1em;
      padding-left: .5em;
      font-size: 92%;
      white-space: nowrap;
    }
    & dt:not(:empty):after {
      content: ":";
    }
    & dd {
      text-align: left;
    }
    & dd:not(:last-child) {
      border-right-width: 1px;
      border-right-style: solid;
    }
  }

  @media screen and (width <= 736px){
    & dl {
      display: grid;
      grid-template-columns: max-content 1fr;
    }
    & dt:nth-of-type(even),
    & dd:nth-of-type(even) {
      background-color: var(--box-even-rows-bg-color);
    }
    & dt:not(:last-of-type),
    & dd:not(:last-of-type) {
      border-right-width: 0px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
  }
}

/* Kizuato */
#kizuato {
  position: relative;
  margin-top: var(--box-v-gap);
  align-self: end;
}
#kizuato table {
  border-top-width: 1px;
  border-top-style: solid;

  & col:nth-child(1) { width: 4em; }
  & col:nth-child(2) { width: 6.5em; }
  & col:nth-child(3) { width: 6.5em; }
  & col:nth-child(4) { width: 6.5em; }
  & col:nth-child(5) { width: 6.5em; }
  @media screen and (width <= 736px){
    & col:nth-child(1) { width: 3.5em; }
    & col:nth-child(2) { width: 6em; }
    & col:nth-child(3) { width: 6em; }
    & col:nth-child(4) { width: 6em; }
    & col:nth-child(5) { width: 6em; }
  }

  & tbody th {
    font-size: 87%;
  }
  & tbody td.name {
    padding: .1em .2em 0 .2em;
    font-size: 110%;
    font-weight: bold;
    line-height: 1.6;
    text-align: left;
    vertical-align: bottom;
  }
  & tbody td:not(.name):not(.left) {
    font-family: var(--font-proportional);
    font-feature-settings: "palt";
  }
  & tbody th.left {
    padding-left: .5rem;
  }
  & tbody td > span {
    display: inline-block;
  }
  & tbody td.hitogara {
    font-size: 90%;
  }
  & tbody td.note {
    font-size: 90%;
  }
}


/* // Partner
---------------------------------------------------------------------------------------------------- */
.partner {
  display: grid;
  margin-top: var(--box-v-gap);
  grid-gap: calc(var(--box-v-gap) / 2) var(--box-h-gap);
  grid-template-columns: 1fr 1.4fr 2.6fr;
  grid-template-rows: auto auto 1fr;
  
  --box-head-bg-color: hsla(
    var(--box-head-bg-color-h, 225),
    var(--box-head-bg-color-s,  9%),
    var(--box-head-bg-color-l, 65%),
    var(--box-head-bg-color-a, 0.4)
  );
  --box-base-bg-color: hsla(
    var(--box-base-bg-color-h,   0),
    var(--box-base-bg-color-s,   0%),
    var(--box-base-bg-color-l, 100%),
    var(--box-base-bg-color-a, 0.5)
  );
  --box-outside-border-color: hsl(
    var(--box-head-bg-color-h, 0),
    calc( var(--box-head-bg-color-s,   0%) * 0.15 ), 60%
  );
  --box-inside-border-color: hsl(
    var(--box-base-bg-color-h, 0),
    calc( var(--box-base-bg-color-s,   0%) * 0.3 ), 65%
  );
  @media screen {
    .night & {
      --box-base-bg-color: hsla(
        var(--box-base-bg-color-h,   0),
        var(--box-base-bg-color-s,  0%),
        var(--box-base-bg-color-d, 15%),
        var(--box-base-bg-color-a, 0.5)
      );
      --box-outside-border-color: hsl(
        var(--box-head-bg-color-h, 0),
        calc( var(--box-head-bg-color-s,   0%) * 0.15 ), 35%
      );
      --box-inside-border-color: hsl(
        var(--box-base-bg-color-h, 0),
        calc( var(--box-base-bg-color-s,   0%) * 0.3 ), 25%
      );
    }
  }
  @media screen and (width >= 1400px){
    &:first-child {
      margin-top: 0;
    }
  }
}
.partner .image, 
.partner .image-none {
  grid-column: 1;
  grid-row: 1 / 4;
  @media print {
    break-inside: avoid;
  }
}
.partner .partner-name { grid-column: 2 / span 2; }
.partner .partner-personal { grid-column: 2 / span 2; }

.partner .image-none::after {
  font-size: 6rem;
}
.partner .image p.words, 
.partner .image-none p.words {
  display: none;
}
.partner .partner-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-image: linear-gradient(to right, var(--box-head-bg-color), var(--box-base-bg-color));
  border-width: 2px 0px 1px;
  border-style: solid;
  border-color: var(--box-outside-border-color, inherit);
}
.partner .partner-name h1 {
  padding-left: .2em;
  font-size: 1.5rem;
  font-family: var(--base-font-family-min);
  text-shadow: var(--bg-color) 0px 0px .5em,
    var(--bg-color)  .1rem .1rem, var(--bg-color) -.1rem -.1rem,
    var(--bg-color) -.1rem .1rem, var(--bg-color)  .1rem -.1rem,
    var(--bg-color)  .0rem .1rem, var(--bg-color)  .0rem -.1rem,
    var(--bg-color) -.1rem .0rem, var(--bg-color)  .1rem  .0rem;
  & a {
    font-size: 1.8rem;
  }
}
.partner .partner-name dl {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  margin: .2em .2em .2em auto;
  line-height: 1;
  align-self: end;
  & dt {
    font-size: 78%;
  }
  & dt::after {
    content: ":";
  }
  & dd {
    font-size: 86%;
    text-align: right;
    flex-grow: 1;
  }
}
.partner-personal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
  .another & {
    width: 66.66%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  & dl:not(:first-child) {
    border-left-width: 1px;
    border-left-style: solid;
  }
  @media screen and (width <= 736px){
    & dl {
      font-family: var(--font-proportional);
    }
    & dl:nth-child(3),
    & dl:nth-child(4) {
      & dt {
        font-size: 90%;
      }
    }
  }
}
.another h2 { visibility: hidden; }
.marker {
  display: grid;
  grid-template-rows: auto 1fr;
}
.marker-details {
  display: grid;
  border-top-width: 1px;
  border-top-style: solid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "POS EM1"
    "SHP EM2"
  ;
  .another & {
    grid-template-columns: 1fr;
    grid-template-areas:
      "EM1"
      "EM2"
    ;
  }
  & .position { grid-area: POS; }
  & .color    { grid-area: SHP; }
  & .emotion1 { grid-area: EM1; }
  & .emotion2 { grid-area: EM2; }
  & .memory   { grid-area: MMR; }

  & dl {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    border-style: solid;
    .marker & {
      &.position { border-width: 0 0 1px; }
      &.color    { border-width: 0; }
      &.emotion1 { border-width: 0 0 1px 1px; }
      &.emotion2 { border-width: 0 0 0 1px; }
      &.memory   { border-width: 0;  }
    }
    .another & {
      &.position { display: none; }
      &.color    { display: none; }
      &.emotion1 { border-width: 0 0 1px; }
      &.emotion2 { border-width: 0; }
      &.memory   { border-width: 0; }
    }
    & dt {
      padding-left: .2em;
      white-space: nowrap;
      @media screen and (width <= 736px){
        font-size: 82%;
      }
    }
    &.emotion1 dt,
    &.emotion2 dt {
      display: block;
      margin-left: -5%;
      margin-right: -5%;
      transform: scaleX(0.9);
    }
  }
}
.partner-personal dd:empty::before,
.marker-details dd:empty::before {
  content: '　';
}
.partner dl.memory dd {
  padding: 0 .5em;
  text-align: left;
  font-size: 93%;
}

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


/* // History
---------------------------------------------------------------------------------------------------- */
#history {
  margin-top: var(--box-v-gap);
}
#history table thead {
  .grow   { width: 4.6em; } /* 成長 */
}


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