@charset "UTF-8";
/* Scss Document */
p {
  font-size: 14px;
  line-height: 1.6;
  margin: 1em 0 0 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 5% 0; }
  table tr th {
    overflow: hidden;
    vertical-align: top;
    width: 20%;
    font-size: 16px;
    text-align: left;
    border-bottom: solid 1px #CCC;
    padding: 20px 0; }
    table tr th span {
      float: right;
      display: inline-block;
      background: #98231b;
      color: #FFF;
      font-size: 12px;
      padding: 0 4px;
      border-radius: 2px;
      margin-top: 4px;
      margin-right: 30px; }
    table tr th span.nin {
      float: right;
      display: inline-block;
      background: #555;
      color: #FFF;
      font-size: 12px;
      padding: 0 4px;
      border-radius: 2px;
      margin-top: 4px;
      margin-right: 30px; }
  table tr td {
    vertical-align: top;
    width: 70%;
    font-size: 16px;
    text-align: left;
    border-bottom: solid 1px #CCC;
    padding: 20px 0; }
    table tr td .radio {
      display: none;
      /* まず、＜input＞タグの表示を消します*/ }
    table tr td label {
      position: relative;
      /* ＜label＞を位置の指標になる指示を書きます*/
      display: inline-block;
      padding: 3px 3px 3px 20px;
      cursor: pointer; }
    table tr td .radio + span::before,
    table tr td .radio + span::after {
      position: absolute;
      content: '';
      top: 50%;
      border-radius: 100%;
      -webkit-transition: all .2s;
      transition: all .2s; }
    table tr td .radio + span::before {
      left: 0;
      width: 14px;
      height: 14px;
      margin-top: -8px;
      background: #f3f3f3;
      /* ラジオボタンの元の色の指定*/
      border: 1px solid #ccc; }
    table tr td .radio + span:hover::before {
      background: #fff;
      /* ラジオボタンのマウスオーバーしたときの色の指定*/ }
    table tr td .radio + span::after {
      opacity: 0;
      left: 4px;
      width: 8px;
      height: 8px;
      margin-top: -4px;
      background: #3498db;
      /* ラジオボタンのチェックした時の色の指定*/
      -webkit-transform: scale(2);
      transform: scale(2); }
    table tr td .radio:checked + span::before {
      /* ラジオボタンがチェックされたときの隣接しているタグへの指示を書きます*/
      background: #fff;
      border: 1px solid #3498db;
      /* ラジオボタンのチェックした時の枠の線の指定*/ }
    table tr td .radio:checked + span::after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
    table tr td .check {
      display: none;
      /* まず、＜input＞タグの表示を消します*/ }
    table tr td label {
      position: relative;
      /* ＜label＞を位置の指標になる指示を書きます*/
      display: inline-block;
      padding: 3px 3px 3px 20px;
      cursor: pointer; }
    table tr td .check + span::before,
    table tr td .check + span::after {
      position: absolute;
      content: '';
      top: 50%;
      border-radius: 1%;
      -webkit-transition: all .2s;
      transition: all .2s; }
    table tr td .check + span::before {
      left: 0;
      width: 14px;
      height: 14px;
      margin-top: -8px;
      background: #f3f3f3;
      /* ラジオボタンの元の色の指定*/
      border: 1px solid #ccc; }
    table tr td .check + span:hover::before {
      background: #fff;
      /* ラジオボタンのマウスオーバーしたときの色の指定*/ }
    table tr td .check + span::after {
      opacity: 0;
      left: 4px;
      width: 8px;
      height: 8px;
      margin-top: -4px;
      background: #3498db;
      /* ラジオボタンのチェックした時の色の指定*/
      -webkit-transform: scale(2);
      transform: scale(2); }
    table tr td .check:checked + span::before {
      /* ラジオボタンがチェックされたときの隣接しているタグへの指示を書きます*/
      background: #fff;
      border: 1px solid #3498db;
      /* ラジオボタンのチェックした時の枠の線の指定*/ }
    table tr td .check:checked + span::after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
    table tr td p {
      font-size: 14px;
      color: #888; }
    table tr td input {
      width: 96%;
      border: solid 1px #CCCCCC;
      margin: 0 0 0 0;
      padding: 3px 5px;
      font-size: 14px; }
    table tr td textarea {
      width: 96%;
      border: solid 1px #CCCCCC;
      margin: 5px;
      padding: 3px 5px; }
    table tr td a {
      color: #231815; }
    table tr td a:hover {
      text-decoration: underline;
      color: #0092d7;
      -moz-transition: .3s;
      -webkit-transition: .3s;
      -o-transition: .3s;
      -ms-transition: .3s;
      transition: .3s; }

.submitbtn {
  display: block;
  text-align: center;
  font-size: 14px;
  width: 100%;
  max-width: 200px;
  margin: 5% auto 0 auto; }
  .submitbtn input[type="submit"] {
    width: 100%;
    background: none repeat scroll 0 0 #CCCCCC;
    border-radius: 3px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 10px 10px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }
  .submitbtn input[type="submit"]:hover {
    background-color: #444444;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease; }

.backbtn {
  display: block;
  text-align: center;
  font-size: 14px;
  width: 100%;
  max-width: 200px;
  margin: 5% auto 0 auto; }
  .backbtn input[type="submit"] {
    width: 100%;
    background: none repeat scroll 0 0 #CCCCCC;
    border-radius: 3px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 10px 10px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }
  .backbtn input[type="submit"]:hover {
    background-color: #444444;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease; }

@media only screen and (min-width: 1px) and (max-width: 640px) {
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 5% 0; }
    table tr th {
      display: block;
      overflow: hidden;
      vertical-align: top;
      width: 100%;
      font-size: 16px;
      text-align: left;
      border-bottom: 0;
      padding: 20px 0 0 0; }
      table tr th span {
        float: right;
        display: inline-block;
        background: #98231b;
        color: #FFF;
        font-size: 12px;
        padding: 0 4px;
        border-radius: 2px;
        margin-top: 4px;
        margin-right: 30px; }
      table tr th span.nin {
        float: right;
        display: inline-block;
        background: #555;
        color: #FFF;
        font-size: 12px;
        padding: 0 4px;
        border-radius: 2px;
        margin-top: 4px;
        margin-right: 0; }
    table tr td {
      display: block;
      vertical-align: top;
      width: 100%;
      font-size: 16px;
      text-align: left;
      border-bottom: 0;
      padding: 20px 0 0 0; }
      table tr td .radio {
        display: none;
        /* まず、＜input＞タグの表示を消します*/ }
      table tr td label {
        position: relative;
        /* ＜label＞を位置の指標になる指示を書きます*/
        display: inline-block;
        padding: 3px 3px 3px 20px;
        cursor: pointer; }
      table tr td .radio + span::before,
      table tr td .radio + span::after {
        position: absolute;
        content: '';
        top: 50%;
        border-radius: 100%;
        -webkit-transition: all .2s;
        transition: all .2s; }
      table tr td .radio + span::before {
        left: 0;
        width: 14px;
        height: 14px;
        margin-top: -8px;
        background: #f3f3f3;
        /* ラジオボタンの元の色の指定*/
        border: 1px solid #ccc; }
      table tr td .radio + span:hover::before {
        background: #fff;
        /* ラジオボタンのマウスオーバーしたときの色の指定*/ }
      table tr td .radio + span::after {
        opacity: 0;
        left: 4px;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        background: #3498db;
        /* ラジオボタンのチェックした時の色の指定*/
        -webkit-transform: scale(2);
        transform: scale(2); }
      table tr td .radio:checked + span::before {
        /* ラジオボタンがチェックされたときの隣接しているタグへの指示を書きます*/
        background: #fff;
        border: 1px solid #3498db;
        /* ラジオボタンのチェックした時の枠の線の指定*/ }
      table tr td .radio:checked + span::after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1); }
      table tr td .check {
        display: none;
        /* まず、＜input＞タグの表示を消します*/ }
      table tr td label {
        position: relative;
        /* ＜label＞を位置の指標になる指示を書きます*/
        display: inline-block;
        padding: 3px 3px 3px 20px;
        cursor: pointer; }
      table tr td .check + span::before,
      table tr td .check + span::after {
        position: absolute;
        content: '';
        top: 50%;
        border-radius: 1%;
        -webkit-transition: all .2s;
        transition: all .2s; }
      table tr td .check + span::before {
        left: 0;
        width: 14px;
        height: 14px;
        margin-top: -8px;
        background: #f3f3f3;
        /* ラジオボタンの元の色の指定*/
        border: 1px solid #ccc; }
      table tr td .check + span:hover::before {
        background: #fff;
        /* ラジオボタンのマウスオーバーしたときの色の指定*/ }
      table tr td .check + span::after {
        opacity: 0;
        left: 4px;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        background: #3498db;
        /* ラジオボタンのチェックした時の色の指定*/
        -webkit-transform: scale(2);
        transform: scale(2); }
      table tr td .check:checked + span::before {
        /* ラジオボタンがチェックされたときの隣接しているタグへの指示を書きます*/
        background: #fff;
        border: 1px solid #3498db;
        /* ラジオボタンのチェックした時の枠の線の指定*/ }
      table tr td .check:checked + span::after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1); }
      table tr td p {
        font-size: 14px;
        color: #888; }
      table tr td input {
        width: 96%;
        border: solid 1px #CCCCCC;
        margin: 0 0 0 0;
        padding: 3px 5px;
        font-size: 14px; }
      table tr td textarea {
        width: 96%;
        border: solid 1px #CCCCCC;
        margin: 5px;
        padding: 3px 5px; }
      table tr td a {
        color: #231815; }
      table tr td a:hover {
        text-decoration: underline;
        color: #0092d7;
        -moz-transition: .3s;
        -webkit-transition: .3s;
        -o-transition: .3s;
        -ms-transition: .3s;
        transition: .3s; }

  .submitbtn {
    display: block;
    text-align: center;
    font-size: 14px;
    width: 100%;
    max-width: 200px;
    margin: 5% auto 0 auto; }
    .submitbtn input[type="submit"] {
      width: 100%;
      background: none repeat scroll 0 0 #CCCCCC;
      border-radius: 3px;
      color: #FFFFFF;
      display: block;
      margin: 0 auto;
      padding: 10px 10px;
      text-decoration: none;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }
    .submitbtn input[type="submit"]:hover {
      background-color: #444444;
      color: #FFFFFF;
      opacity: 0.8;
      transition-duration: 500ms;
      transition-property: all;
      transition-timing-function: ease; }

  .backbtn {
    display: block;
    text-align: center;
    font-size: 14px;
    width: 100%;
    max-width: 200px;
    margin: 5% auto 0 auto; }
    .backbtn input[type="submit"] {
      width: 100%;
      background: none repeat scroll 0 0 #CCCCCC;
      border-radius: 3px;
      color: #FFFFFF;
      display: block;
      margin: 0 auto;
      padding: 10px 10px;
      text-decoration: none;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }
    .backbtn input[type="submit"]:hover {
      background-color: #444444;
      color: #FFFFFF;
      opacity: 0.8;
      transition-duration: 500ms;
      transition-property: all;
      transition-timing-function: ease; } }