/*-------  画面全体 body ---------*/
    body {
      marigin: 5px 20px;
    }


   /*------- 余白  -------*/
    .left30 {
      margin-left: 30px; margin-right: 30px;
    }

    .left60 {
      margin-left: 60px; margin-right: 60px;
    }

    .left100 {
      margin-left: 100px; margin-right: 100px;
    }


    /*-------- テーブルのスタイル --------*/
    table.gen {
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        border-collapse: collapse;
    }

    th.gen, td.gen {
        padding: 8px;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    th.gen { background: #ccc; }


    /*------- attention ------------*/
    /*    赤枠点線の囲み            */
    table.attention{
        border : 2px dotted red;
        background-color : white;
    }
    table.attention td{
        padding : 3px;
    }


/*-------====== ページ個別設定 ======--------*/
/*------- フォーム ＆ 確認画面---*/
  div.center {
     margin: 0 auto; 
     width: fit-content;
  }

/*-------- KIT ロゴ -------------*/
  div.logo { width: fit-content; }
  div.logo img {   margin: 0 auto;   }


/*------- テーブル内レイアウト ----*/
  caption {   font-size: 14pt;  }
  span    {   color: red;       }
  span.post_msg {
     color: black;
     font-size: 10pt;
  }

  input.address { width: 90%; }
  input.grad    { margin: 0px 5px; }

  textarea {
     width: 90%;
     height: 5em;
  }

/*------- ボタンレイアウト ---------*/
  div.submit {
     margin: 1em auto;
  }
  div.submit input {
     width:   10em;
     height: 2.5em;
  }

/*-------- 確認画面 ---------------*/
  table.confirm {   width: 100%;   }

  table.confirm th {   width: 30%;   }
  table.confirm td {   width: 70%;   }


/*--------- 完了画面 ---------------*/
  div.finish_msg {
     margin: 20px auto 30px auto;
     text-align: center;
  }

  div.sfont { font-size: 9pt; }


/*---=======================================---*/
/*------ レスポンシブ設定 ------*/
@media only screen and (max-width:900px){

   /*---- テーブルを縦に配置 -------*/
     table  {
     }
     th, td {
        display: block;
     }


   /*---- 全体 ---------------------*/
     body { margin: 0 10px 60px; }

     th.gen, td.gen {
        padding: 8px 0px;
        text-align: center;
     }

   /*---- KIT ロゴ -----------------*/
     div.logo { 
        margin: 10px auto;
        width: fit-content; 
     }
     div.logo img {
        margin: 0 auto;
        width: 100%;
     }

   /*----- テーブル内レイアウト ----*/
     input, input.address { 
        width: 80%;
        height: 2.5em;
     }
     input.grad {   width: 50%;   }

     textarea {
        width: 90%;
        height: 5em;
     }

   /*----- ボタンレイアウト ---------*/
     div.submit input {
        font-size: 12pt;
        display: block;  /*-- divで囲んだ二つのinputを縦に並べる --*/
        margin: 1em auto 0;
     }


   /*------- 確認画面 ---------------*/
     table.confirm th {   width: 100%;   }
     table.confirm td {   width: 100%;   }


   /*------- 完了画面 ---------------*/ 
     div.finish_msg {
        width: 80%;
     }

} /*--- @media END ---*/