@charset "utf-8";
/* // Narrow
---------------------------------------------------------------------------------------------------- */
@media screen and (max-width:735px){
  html {
    font-size: 1.8vw;
  }
}
@media screen and (max-width:767px){
  #area-status {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 0.7fr 0.7fr 1.5fr 2.1fr;
    grid-template-rows: auto;

    grid-template-areas:
      "PER  PER  PER  PER"
      "STT  STT  STT  IMG"
      "STT  STT  STT  IMG"
      "EXP  LVL  sSTT IMG"
    ;
  }
}
@media screen and (max-width:735px){
  body {
    background-size: auto, 60%;
  }
  #area-status {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 0.7fr 0.7fr 1.5fr 2.1fr;
    grid-template-rows: auto;

    grid-template-areas:
      "PER  PER  PER  PER"
      "STT  STT  STT  IMG"
      "STT  STT  STT  IMG"
      "EXP  LVL  sSTT IMG"
    ;
  }
  
  .image p.words,
  .image-none p.words {
    font-size: 1.6rem;
  }
  
  #status {
    grid-gap: 5px 1rem;
    grid-template-columns: 1fr 1fr 1fr 1.4fr 0.7fr 1.4fr;
  }
  
  #area-ability {
    flex-wrap: wrap;
  }
  #area-ability > * {
    flex-basis: calc(50% - 1rem);
  }
  #area-ability > *:last-child {
    margin-top: 1rem;
    margin-left: 0px;
  }
  
  #crafts {
    flex-direction: row;
    justify-content: space-between;
  }
  #crafts > .box {
    width: auto;
    flex-basis: 49%;
    margin-bottom: 1rem;
  }
  #crafts > .box + .box {
    margin-top: 0;
  }
  
  #area-actions {
    display: flex;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    margin: 0;
  }
  #area-actions > * {
    margin: 0;
  }
  #language { grid-row: 1 / 3; grid-column: 2 / 3; }
  #magic-power { grid-column: 1 / 3; }
  
  
  #fellow #personal-area {
    grid-template-areas:
      " LVL NAME NAME NAME"
      " LVL  PLN  PLN  PLN"
      "RACE RACE  IMG  IMG"
      " PER  PER  IMG  IMG"
      " CLS  CLS  IMG  IMG"
      "LANG LANG  IMG  IMG"
      "NOTE NOTE  IMG  IMG"
      "NOTE NOTE   MP CHCK"
    ;
  }

  #fellow #f-level {
    width: 46px;
    height: 76px;
}
  #fellow #f-level dd {
    height: 80px;
    line-height: 70px;
    font-size: 2.5rem;
}
  #f-image-none,
  #f-image          {
    max-height: 35rem;
  }
  #f-note {
    min-height: 6rem
  }
}

/* // Wide
---------------------------------------------------------------------------------------------------- */
/*
@media screen and (min-width:1180px) and (max-width:1599px){
  body {
    grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
  }
  header nav {
    max-width: 1200px;
  }
  article {
    max-width: 1160px;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: 3fr 1fr;
  }
  article > * {
    grid-column: span 2;
  }
  article > div.column-status,
  article > #area-actions {
    grid-column: span 1;
  }
  article > div.column-status {
    grid-row: span 2;
  }
  #area-actions {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  #area-actions > * {
    width: 100%;
    flex-basis: auto;
    flex-grow: 0;
    margin: 0 0 1rem;
  }
  #language { order: -1; }
  #package  { order: 1; }
  #magic-power  { order: 2; }
  #area-other-actions  { order: 3; }
  #area-actions #magic-power tr th:first-child {
    display: none;
  }
  #area-actions #magic-power tr th span {
    font-size: .8em;
  }
  #area-actions #magic-power tr td:nth-child(3) {
    font-size: .85em;
  }
  #area-actions #magic-power tr td:nth-child(3):first-letter{
    font-size: 1.15em;
  }
}
*/
@media screen and (min-width:1400px){
  body {
    grid-template-columns: 1fr minmax(auto, 1800px) 1fr;
  }
  header nav {
    max-width: 1800px;
  }
  article{
    max-width: 1760px;
    display: grid;
    grid-gap: 0 1.2rem;
    grid-template-columns: 1fr 1fr;
  }
  #area-name, #tags {
    grid-column: span 2;
  }
  div.column-status {
    grid-row: span 2;
  }
  #area-actions {
    align-items: flex-start !important;
  }
  #area-items {
    grid-column: 2;
    grid-row: 5;
  }
  #free-note {
    grid-column: 1;
    grid-row: 5;
  }
  #history {
    grid-column: span 2;
  }
  #history table tr td {
    font-size: inherit !important;
  }
  #history table tr th:nth-child(2) { width: 6.5em; } /* DATE */
}
@media screen and (min-width:1400px) and (max-width:1680px){
  #status dl[id^="stt-bonus"] dt span::after { content: "Ｂ" !important; }
}