@charset "UTF-8";


@font-face {
  font-family: 'DQFC';
  src: url('/common/font/DragonQuestFC.ttf');
  font-display: block;
}
@font-face {
  font-family: 'DQFCI';
  src: url('/common/font/DragonQuestFCIntact.ttf');
  font-display: block;
}

@media all{
  :root{ --cell: 16px; }
  body{
    background-color: #000;
    color: #fff;
    margin: 0 0 0 16px;
    font-size: 16px;
    padding: 0;
    line-height: normal;
  }
  a{
    color: #77f;
  }
  header{
    white-space: nowrap;
  }
  section{
    margin-bottom: 16px;
  }
  input[type="text"],select,textarea{
    border: none;
    background-color: transparent;
    padding: 0;
    scrollbar-width: thin;
  }
  select{
    color: #00f;
    appearance: normal;
    height:34px;
    vertical-align: text-top;
  }
  option{
    background-color: #000;
    font-size: 16px;
    line-height:16px;
  }
  table{
    border: 2px #fff solid;
    border-collapse: collapse;
  }
  td,th{
    border: 1px solid #fff;
    text-align: center;
    min-width: 5ex;
  }
  th{
    border-top: 2px #fff solid;
    background-color: #77c;
  }
  th.orderJ{
    background-color: #00c;
  }
  .dq{
    background-color: transparent;
    color: transparent;;
    font-family: 'DQFCI';
    font-size: var(--cell);
    line-height: var(--cell);

    padding: 0;
    outline: none;
    resize: none;

    overflow: hidden;
    white-space: nowrap;
  }
  .dqlike{
    background-color: transparent;
    color: transparent;
    font-family: 'DQFC';
    font-size: calc(var(--cell) * 2);
    line-height: var(--cell);

    padding: 0;
    outline: none;
    resize: none;

    overflow: hidden;
    white-space: nowrap;
  }
  .hidden{
    display: none;
  }


  #ready{
    display: none;
  }
  html.fonts-ready #loading{
    display: none;
  }
  html.fonts-ready #ready{
    display: inline;
  }

  html.fonts-ready input[type="text"],
  html.fonts-ready select,
  html.fonts-ready textarea,
  html.fonts-ready .dq,
  html.fonts-ready .dqlike{
    color: #fff;
  }
  .error{
    background: linear-gradient(to bottom,transparent 12px,rgba(127,0,0,0.5) 1px,rgba(127,0,0,0.5));
    color: #f00;
  }
  td.error{
    background: rgba(127,0,0,0.5);
  }

  #title{
    font-weight: bold;
    color: #ff0;
  }
  #jumonEditor{
    height: 512px;
    vertical-align: bottom;
  }


  #app{
    position: absolute;
    left: 16px;
    top:  24px;
    width:  calc(var(--cell) * 36);
    height: calc(var(--cell) * 32);


    font-size: var(--cell);
    line-height: var(--cell);
    letter-spacing: normal;
    word-spacing: normal;
    text-indent: 0;
    text-align: left;
    font-weight: normal;
    font-style: normal;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: normal;
    text-transform: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  #app > *{
    position: absolute;
    left: calc(var(--col) * var(--cell) + var(--dx, 0px) + var(--wkx, 0px));
    top:  calc(var(--row) * var(--cell) + var(--dy, 0px) + var(--wky, 0px));
  }


  #s2level,#power,#speed,#s2hp,#s2mp,#attack,#defence{ --col:17; --dx:8px; --dy:-1px; }
  .item,.item2{ --dy:-3px; }
  .is-webkit .item,.is-webkit .item2{ --wkx:-4px; --wky:2px; }
  .is-webkit option{ font-size:32px; line-height:32px; }


  #input1    { --col: 0;  --row: 0;  }
  #jumon     { --col: 4;  --row: 3;  --dy:-6px; }
  #jumonError{ --col:22;  --row: 1;  }
  #jumonSeed { --col:23;  --row: 6;  --dy:-6px; }


  #status1   { --col: 0;  --row: 8;  }
  #name      { --col: 2;  --row: 9;  }
  #type      { --col: 6;  --row: 9;  --dx:8px; }
  #s1level   { --col: 4;  --row:11;  }
  #s1hp      { --col: 4;  --row:13;  }
  #s1mp      { --col: 4;  --row:15;  }
  #gold      { --col: 2;  --row:17;  }
  #exp       { --col: 2;  --row:19;  }
  #flags     { --col: 0;  --row:20;  --dx:3px; --dy:8px; }


  #status2   { --col: 8;  --row: 8;  --dx:8px; }
  #s2level   { --row:11; }
  #power     { --row:13; }
  #speed     { --row:15; }
  #s2hp      { --row:17; }
  #s2mp      { --row:19; }
  #attack    { --row:21; }
  #defence   { --row:23; }
  #buki      { --col:14;  --row:24;  --dx:8px; }
  #yoroi     { --col:14;  --row:26;  --dx:8px; }
  #tate      { --col:14;  --row:28;  --dx:8px; }


  #status3   { --col:24;  --row: 8;  }
  #yakusou   { --col:26;  --row:10;  }
  #kagi      { --col:26;  --row:12;  }
  #item1     { --col:26;  --row:14;  }
  #item2     { --col:26;  --row:16;  }
  #item3     { --col:26;  --row:18;  }
  #item4     { --col:26;  --row:20;  }
  #item5     { --col:26;  --row:22;  }
  #item6     { --col:26;  --row:24;  }
  #item7     { --col:26;  --row:26;  }
  #item8     { --col:26;  --row:28;  }
  #jumon{

    width: 224px;
    height: 56px;

    white-space: pre;
  }
  #jumonFix{
    margin: 4px 0 0 126px;
    border: 3.5px #ccc outset;
    border-radius: 4px;
    background-color: #777;
    color: #fff;
    height: 30px;
    width:80px;
  }
  #jumonFix:hover{
    background-color: rgba(0,63,240,1);
  }
  #jumonFix:active{
    border-style: inset;
    background-color: rgba(0,31,63,1);
  }

  .digit3{
    text-align: right;
    width: 48px;
  }
  .digit5{
    text-align: right;
    width: 80px;
  }
  .digit1list{
    text-align: right;
    width: 36px;
  }
  .digit2list{
    text-align: right;
    width: 52px;
  }
  .item,.item2{
    width: 136px;
  }
  #type{
    width: 16px;
    font-size: 12px;
    text-align: right;
    display: none;
  }
  #name{
    width: 64px;
  }

  #flags{
    line-height: 32px;
  }
  input[type="checkbox"]{
    margin-right: 4px;
  }

  #analysis{
    display: none;
    font-size: 12px;
  }
  #analysis td{
    max-width:16px;
  }
  #log{
    display: none;
    margin: 8px 0;
    font-size: 16px;
  }
  .result:hover{
    color: rgb(0,63,240);
    cursor: pointer;
  }
  .searchword{
    color: rgb(240,31,0);
  }
  .searchword:hover{
    color: rgb(240,63,0);
  }
  .crc{
    background-color:#070;
  }
  input:hover.editable{
    background: rgba(0,63,240,1);
  }
  input:focus.editable{
    background: rgba(0,31,63,1);
  }
  select:hover{
    background: linear-gradient(to bottom,transparent 12px,rgba(0,63,240,1) 1px,rgba(0,63,240,1));
  }
  select:focus{
    background: linear-gradient(to bottom,transparent 12px,rgba(0,31,63,1) 1px,rgba(0,63,120,1));
  }

  .credit{
    width: 555px;
    text-align: right;
  }
}


@media screen and (min-width: 481px){
}


@media screen and (min-width: 769px){
}