/* ******************************************************* */
/*                      PC用のCSS                          */
/* ******************************************************* */

hr {
  height: 2px;
  background-color: #ff6666;
  border: none;
  color: #ff6666;
}

p {line-height: 1em;}

label, input[type="checkbox"], input[type="radio"] {
    line-height: 170%;
}

.contents {
  width: 1000px;
  font-size :16px;
  margin-left: auto;
  margin-right: auto;
}

.error {
  color: #FF0000;
}

.matrix {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.matrix td {
  word-wrap: normal;
  border-width: 1px;
  border-style: solid;
  border-spacing: 1px;
  border-color: #000;
  padding: 8px;
  background-color: #FFF;
}

.matrix img {
  display: block;
  max-width: 100%;
  object-fit: scale-down;
}

.matrix_corner {
  border-top: none !important;
  border-left: none !important;
}

.matrix_title {
  color: #FFF !important;
  background-color: #339 !important;
}

.matrix_cell {
  text-align: center;
  vertical-align: middle !important;
  background-color: #FFFF99 !important;
}

.vertical {
  display: flex;
  writing-mode: tb-rl;
  text-orientation: upright;
  align-items: center;
}

.vertical img {
  vertical-align: middle;
}

/* ******************************************************* */
/*                     タブレット用のCSS                   */
/* ******************************************************* */
@media screen and (max-width:768px) {

  hr {
      height: 2px;
      background-color: #ff6666;
      border: none;
      color: #ff6666;
  }

  p {line-height: 1em;}

  label, input[type="checkbox"], input[type="radio"] {
      line-height: 220%;
  }

  .contents {
    width: 98%;
    font-size :14px;
    margin-left: auto;
    margin-right: auto;
  }

  .error {
    color: #FF0000;
  }

  .matrix {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }

  .matrix td {
    word-wrap: normal;
    border-width: 1px;
    border-style: solid;
    border-spacing: 1px;
    border-color: #000;
    padding: 8px;
    background-color: #FFF;
  }

  .matrix img {
    display: block;
    max-width: 100%;
    object-fit: scale-down;
  }

  .matrix_corner {
    border-top: none !important;
    border-left: none !important;
  }

  .matrix_title {
    color: #FFF !important;
    background-color: #339 !important;
  }

  .matrix_cell {
    text-align: center;
    vertical-align: middle !important;
    background-color: #FFFF99 !important;
  }

  .vertical {
    display: flex;
    writing-mode: tb-rl;
    text-orientation: upright;
    align-items: center;
  }

  .vertical img {
    vertical-align: middle;
  }

}

/* ******************************************************* */
/*                     スマホ用のCSS                       */
/* ******************************************************* */
@media screen and (max-width:480px) {

  hr {
      height: 2px;
      background-color: #ff6666;
      border: none;
      color: #ff6666;
  }

  p {line-height: 1em;}

  label, input[type="checkbox"], input[type="radio"] {
      line-height: 220%;
  }

  img {
    max-width: 100%;: 98%;
    height: auto;
  }

  .contents {
    width: 98%;
    font-size :14px;
    margin-left: auto;
    margin-right: auto;
  }

  .error {
    color: #FF0000;
  }

  .matrix {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }

  .matrix td {
    word-wrap: normal;
    border-width: 1px;
    border-style: solid;
    border-spacing: 1px;
    border-color: #000;
    padding: 8px;
    background-color: #FFF;
  }

  .matrix img {
    display: block;
    max-width: 100%;
    object-fit: scale-down;
  }

  .matrix_corner {
    border-top: none !important;
    border-left: none !important;
  }

  .matrix_title {
    color: #FFF !important;
    background-color: #339 !important;
  }

  .matrix_cell {
    text-align: center;
    vertical-align: middle !important;
    background-color: #FFFF99 !important;
  }

  .vertical {
    display: flex;
    writing-mode: tb-rl;
    text-orientation: upright;
    align-items: center;
  }

  .vertical img {
    vertical-align: middle;
  }

}