@charset "utf-8";

/* ===== 数字タイルの見本を常に画面上部へ固定（最下部までずっと固定） ===== */
.tiles_fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fafafa;
  padding: 6px 0 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.tiles_fixed .blue_tiles{
  margin-top: 0;
}

/* ===== 3人分のメモ欄を常に表示 ===== */
.for3players,
.for4players{
  display: block;
}

/* ===== 数字タイルの入力欄（画像1）を5つ表示 ===== */
/* tile5 と center3 を表示したまま、5枚がきれいに並ぶ幅にする */
.tile{
  width: 19%;
}
.tile5{
  display: block;
}
.center3{
  display: block;
}

/* ===== 情報メモ欄（画像2）を一回り大きく ===== */
.info{
  font-size: 17px;
  line-height: 2.3;
  margin: 0 2%;
}
.info input{
  max-width: 3.8em;
  width: 3.4em;
  font-size: 17px;
  padding: 3px 5px;
  margin: 0 6px 6px;
  border: 2px solid #999;
  border-radius: 4px;
}
.info input:focus{
  border-color: #006DD9;
  outline: none;
}
.info textarea{
  font-size: 16px;
  min-height: 64px;
  border: 2px solid #999;
  border-radius: 4px;
  padding: 6px;
  margin-top: 6px;
}

/* ===== 3つの合計欄を階段状（左上→中央→右下）に並べる。枠は縦に広げる ===== */
.tile,
.tile_bg{
  height: 176px;
}
.left3{
  top: 72px;
}
.center3{
  top: 106px;
}
.right3{
  top: 140px;
}

/* ===== 3本の矢印（左3枚・中央3枚・右3枚）の合計入力欄を一回り大きく ===== */
.left3 input,
.right3 input,
.center3 input{
  font-size: 13px;
  width: 3.1em;
  max-width: 3.4em;
  padding: 2px 3px;
  border: 2px solid #999;
  border-radius: 4px;
}

/* ===== 追加項目（連続している・同じ色）を目立たせる ===== */
.info .add_label{
  font-weight: bold;
  color: #E8760A;
}
.info .add_field input{
  border-color: #E8760A;
}