@charset "utf-8";

/******************************************************/
/* ▼仕事内容          - モバイル/デスクトップ共通CSS */
/******************************************************/

.system-wrapper {
  width: 96%;
  margin: 0 auto;
  text-align: left;
}

/* システムのタイトル */
.system-title {
  margin: 10px 0;
  border-left: 4px solid #ccc;
  padding: 2px 0 2px 10px;
  background: #003060;
}

/* 画像を中央寄せにする */
.system-img {
  text-align: center;
}

.system-img img {
  width: 94%;
  height: auto;
  margin-top: 20px;
}

/* 画像の枠線 */
.system-img img.frame {
  border: 2px solid #333;
}

/* 画像の背景色を白にする */
.system-img img.back-white {
  background: #fff;
}

/* 開発言語 */
.dev-lang {
  width: 100%;
  margin: 0 auto;
}

.dev-lang th,
.dev-lang td {
  text-align: left;
  display: block;
  padding-left: 12px;
}

.dev-lang th {
  background: #fff;
  color: #002060;
  white-space: nowrap;
  line-height: 32px;
}

.dev-lang ul {
  padding-left: 16px;
}

.vg-img,
.google-play-img {
  width: 210px !important;
  height: auto;
}

/******************************************************/
/* ▼仕事内容           - デスクトップ用CSS           */
/******************************************************/

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

  .system-wrapper {
    max-width: 960px;
  }

  .system-img img {
    width: 640px;
    height: auto;
  }

  .dev-lang {
    table-layout: fixed;
    width: 690px;
  }

  .dev-lang th,
  .dev-lang td {
    display: table-cell;
  }

  .dev-lang th {
    height: 75px;
    width: 190px;
  }

  .dev-lang td {
    width: 500px;
  }
}