@charset "utf-8";

/* ----- レイアウト --------------------------------------- */
.inner {
  padding: 0 2%;
  position: relative;
  max-width: 850px;
  min-width: 310px;
  margin: auto;
}

/*----- ヘッダー -------------------------------------------*/
#headerImg {
  background-size: contain;
  width: 145px;
  height: 40px;
  margin-top: 10px;
}

.header {
  display: flex;
  border-bottom: 1px #03195f solid;
}

/* .header .systemheader {
  float: right;
} */

.header .midashi_01 {
  font-size: 22px;
  font-weight: bold;
  padding: 5px;
  margin: 20px;
  text-align: center;
}

@media (max-width: 550px) {
  .header {
    display: flow-root;
  }

  .header .midashi_01{
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

 @media (max-width: 400px) {
  #headerImg {
    width: 115px;
    height: 36px;
  }

  .header .midashi_01{
    margin: 5px;
    font-size: 18px;
  }
}

/*----- フッター --------------------------------------------*/
.footer {
  margin-top: 20px;
  text-align: center;
}

/*----- ステップ --------------------------------------------*/
.registration_navi {
  display: flex;
  padding: 0;
  margin-top: 10px;
}

.registration_navi li {
  align-items: center;
  background: #eee;
  border-radius: 6px;
  display: flex;
  font-weight: bold;
  height: 2.4em;
  margin: 1%;
  padding: 0 0 0 20px;
  width: 33.3%;
  font-size: 18px;
}

.registration_navi li.active {
  background: #108FC9;  
  color: #fff;
}

.registration_navi li span {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .registration_navi {
    flex-wrap: wrap
  }

  .registration_navi li {
    padding: 0 0 0 10px;
    width: 48%;
    height: 2.5em;
    font-size: 17px;
  }
}

/*----- 共通部分 ---------------------------------------------------*/
.error-msg{
	color: #dd0000;
}

.alert-danger .h3{
  margin: 10px 5px;
  font-size:19px;
}

.alert-danger{
  padding:5px;
  margin: 1%;
}


.login     .memo_01,
.inputdata .memo_01,
.register  .memo_01 {
  font-size: 16px;
  margin: 10px;
}

.intro   .memo_02,
.confirm .memo_02 {
  font-size: 17px;
  margin: 20px 10px;
}

.confirm .memo_03 {
  font-size: 17px;
  margin: 20px 10px;
  color: #dd0000;
}

.login     .example,
.inputdata .example {
  font-size: 18px;
  margin-left: 5px;
  font-weight: normal;
}

.intro   .midashi_02::after,
.confirm .midashi_02::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 4px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #e94235;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .intro   .midashi_02,
  .confirm .midashi_02 {
    font-size: 17px;
  }
}

.login     .registration_form,
.inputdata .registration_form,
.confirm   .registration_form,
.register  .registration_form {
  margin: 1%;
}

@media (max-width: 360px) {
  .login     .table,
  .inputdata .table,
  .confirm   .table,
  .register  .table {
    width: 99%;
  }
}

.login     .table input,
.inputdata .table input {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #fff2c7;
  border-color: black;
  outline: none;
  font-size: 18px; 
  font-weight: normal;
  cursor: pointer;
}

.login     .table input,
.inputdata .table input {
  width: 280px;
}

.inputdata .table textarea {
  margin-top: 10px;
  margin-bottom: 10px;
  resize: none;
  width: 280px;
  height: 80px;
  cursor: pointer;
  border-color: #000000;
  background-color: #fff2c7;
  font-size: 18px;
}

.inputdata .table .radio-style-label,
.inputdata .table .check-style-label {
  display: block;
  position: relative;
  padding-left: 28px;
  padding-top: 4px;
  font-size: 19px;
  font-weight: normal;
  cursor: pointer;
}

.inputdata .table .radio-style-label input,
.inputdata .table .check-style-label input {
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 5px;
  margin: auto;
  width: auto;
}

@media (max-width: 768px) {
  .login     .table .radio-style-label,
  .inputdata .table .radio-style-label,
  .inputdata .table .check-style-label {
    font-size: 16px;
  }
}

.login     .table .required:after,
.inputdata .table .required:after {
  background: #d80b24;
  border-radius: 4px;
  color: #fff;
  content: "必須";
  font-size: 80%;
  float: right;
  padding: 5px 10px;
}


.intro   .btn_01,
.confirm .btn_01 {
  background: #eee;
  border-radius: 8px;
  border: 0;
  border-bottom: solid 4px #888;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  margin: 10px auto;
  font-weight: bold;
  padding: 10px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
}

.login     .btn_02,
.intro     .btn_02,
.inputdata .btn_02,
.confirm   .btn_02 {
  background: #108FC9;  
  border-radius: 8px;
  border: 0;
  border-bottom: solid 4px #064f70;  
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  margin: 10px auto;
  font-weight: bold;
  padding: 10px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
}

.intro     .btn_01,
.login     .btn_02,
.intro     .btn_02,
.inputdata .btn_02 {
  width: 370px;
}

@media (max-width: 768px) {
  .intro     .btn_01,
  .login     .btn_02,
  .intro     .btn_02,
  .inputdata .btn_02 {
    width: 280px;
  }
}

.login     .btn_02:active,
.intro     .btn_01:active,
.intro     .btn_02:active,
.inputdata .btn_02:active,
.confirm   .btn_01:active,
.confirm   .btn_02:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/*----- ログインページ <login> -------------------------------------*/
.login .table th {
  background: #ededed;
  width: 30%;
  padding: 15px 3%;
  vertical-align: middle;
  font-size: 19px;
}

.login .table td {
  padding: 3% 2% 2% 2%;
  vertical-align: middle;
  font-size: 16px;
}

@media (max-width: 768px) {
  .login .table th,
  .login .table td {
    border: 0;
    display: block;
    width: 100%;
    font-size: 17px;
  }
}

.login .table input[Id="DateY"],
.login .table input[Id="DateM"],
.login .table input[Id="DateD"] {
  width: 80px;
}

@media (max-width: 768px) {
  .login .table input[Id="DateY"],
  .login .table input[Id="DateM"],
  .login .table input[Id="DateD"] {
    width: 70px;
  }
}

.login .table .radio-style-label input {
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 0px;
  margin: auto;
  width: auto;
}

.login .table .radio-style-label {
  display: block;
  position: relative;
  padding-left: 22px;
  padding-right: 7px;
  padding-top: 4px;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}

.login .word_date {
  padding: 2px;
  font-size: 17px;
  margin-top: -20px;
}

@media (max-width: 768px) {
  .login .word_date {
    padding: 0px;
    font-size: 16px;
  }
}


/*----- イントロページ <intro> -------------------------------------*/
.intro .btn_url {
  cursor: pointer;
  /* display: flex; */
  flex-direction: row;
  align-items: baseline;
}

.intro .midashi_02 {
  background: #eee;
  padding: 10px 0 10px 30px;
  position: relative;
  text-align: left;
  font-size: 19px;
  font-weight: bold;
  margin: 1%;
}

/*----- 結果入力ページ <input> -------------------------------------*/
.inputdata .memo_04 {
  font-size: 19px;
}

.inputdata .memo_03 {
  font-size: 19px;
  margin: 1%;
  color: #dd0000;
}

@media(max-width:768px) {
  .inputdata .memo_04,
  .inputdata .memo_03{
    font-size: 17px;
  }
}

.inputdata summary {
  padding: 10px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  border-radius: 4px;
  background: #ffffff;
  font-weight: bold;
  outline: none;
  font-size: 20px;
  display: list-item;
}

@media (max-width: 768px) {

  .inputdata summary{
    font-size: 17px;
  }
}

.inputdata .table th {
  background: #ededed;
  width: 30%;
  padding: 15px 3%;
  vertical-align: middle;
  font-size: 19px;
}

.inputdata .table td {
  padding: 3% 2% 3% 2%;
  vertical-align: middle;
  font-size: 16px;
}

@media (max-width: 768px) {
  .inputdata .table th,
  .inputdata .table td {
    border: 0;
    display: block;
    width: 100%;
    font-size: 16px;
  }
}

.inputdata .table .required_items {
  font-weight: bold;
  font-size: 22px;
  padding-left: 0;
  padding-top: 5px;
}

@media (max-width: 768px) {
  .inputdata .table .required_items {
    font-size: 18px;
  }
}

.inputdata .btn_rst,
.inputdata .btn_reEnter {
  background: white;
  border-radius: 6px;
  border: 0;
  border-bottom: solid 4px #888;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  margin-left: to;
  margin-right: auto;
  font-weight: bold;
  padding: 4px 10px;
  position: relative;
  text-align: center;
  float: center;
}

.inputdata .btn_rst:active,
.inputdata .btn_reEnter:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.inputdata .reEnter {
  display: none;
}

.inputdata input[Id="blHospitalNameText"],
.inputdata input[Id="glyHospitalNameText"],
.inputdata input[Id="glyLifestyleOtherText"],
.inputdata input[Id="liHospitalNameText"],
.inputdata input[Id="liLifestyleOtherText"],
.inputdata input[Id="ecgHospitalNameText"],
.inputdata input[Id="ecgMethodOtherText"],
.inputdata input[Id="fuHospitalNameText"],
.inputdata input[Id="fuMethodOtherText"],
.inputdata input[Id="ulHospitalNameText"],
.inputdata input[Id="ulMethodOtherText"],
.inputdata input[Id="chXHospitalNameText"],
.inputdata input[Id="chXMethodOtherText"],
.inputdata input[Id="giHospitalNameText"],
.inputdata input[Id="giMethodOtherText"],
.inputdata input[Id="ocHospitalNameText"],
.inputdata input[Id="ocMethodOtherText"],
.inputdata input[Id="paHospitalNameText"],
.inputdata input[Id="paMethodOtherText"],
.inputdata input[Id="brHospitalNameText"],
.inputdata input[Id="brMethodOtherText"] {
  background: white;
  border-color: #808080;
}

/*----- 入力内容確認ページ <confirm> -------------------------------------*/
.confirm  .memo_03 {
  font-weight: bold;
}

.confirm .midashi_02 {
  background: #eee;
  padding: 10px 0 10px 30px;
  position: relative;
  text-align: left;
  font-size: 19px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .confirm .midashi_02{
    padding: 10px 0 10px 24px;
    font-size: 18px;
  }
}

.confirm .table th {
  background: #ededed;
  width: 30%;
  padding: 15px 3%;
  vertical-align: middle;
  font-size: 19px;
}

.confirm .table td {
  padding: 3% 2% 2% 2%;
  vertical-align: middle;
  font-size: 18px;
}

@media (max-width: 768px) {
  .confirm .table th{
    border: 0;
    display: block;
    width: 100%;
    font-size: 17px;
  } 
  .confirm .table td {
    border: 0;
    display: block;
    width: 100%;
    font-size: 17px;
    margin-left: 8px;
  }
}

.confirm .btn_01,
.confirm .btn_02 {
  width: 338px;
}

@media (max-width: 768px) {
  .confirm .btn_01,
  .confirm .btn_02 {
    width: 280px;
  }
}

/*----- 結果送信完了ページ <register> -------------------------------------*/
.register .memo_05 {
  font-size: 17px;
  color: #ff0000;
  font-weight: bold;
  margin: 10px;
}

.register .table th {
  background: #ededed;
  width: 30%;
  padding: 15px 3%;
  vertical-align: middle;
  font-size: 19px;
}

.register .table td {
  padding: 3% 2% 2% 2%;
  vertical-align: middle;
  font-size: 18px;
}

@media (max-width: 768px) {
  .register .table th {
    border: 0;
    display: block;
    width: 100%;
    font-size: 17px;
  }

  .register .table td {
    border: 0;
    display: block;
    width: 100%;
    font-size: 17px;
    margin-left: 8px;
  }
}


/* ----- 管理者画面用 ----- */
.minner {
  padding: 0 2%;
  position: relative;
  width: 850px;
  margin: auto;
}

.mtableinner{
  padding: 0 2%;
  position: relative;
  width: 95%;
  margin: auto;
  
}


.minner summary{
  padding: 10px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  border-radius: 4px;
  background: #ffffff;
  font-weight: bold;
  outline: none;
  font-size: 20px;
  display: list-item;
}



.mupload_table {
  border-collapse: collapse;
  text-align: center;
  width:100%;
  margin-top:20px;
  margin-bottom:20px;  
}
.mupload_table th,
.mupload_table td {
  padding: 10px;
  border: 1px solid #333;
  font-size:120%;
  text-align: center;
  margin: 10px;
}
.mupload_table th {
  background-color: #2c88d9;
  color: #FFF;
  width: 20%;
}
.mupload_table input {
  margin:20px;
  width: 550px;
}

.mdataview_table,
.mdatadel_table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mdataview_table th,
.mdataview_table td,
.mdatadel_table  th,
.mdatadel_table  td {
  padding: 10px;
  border: 1px solid #333;
  font-size:120%;
  text-align: center;
  margin: 10px;
}
.mdataview_table th,
.mdatadel_table  th {
  background-color: #2c88d9;
  color: #FFF;
  width: 20%;
}

.mdataview_table input,
.mdatadel_table input {
  margin-left: 20px;
  width: 250px;
}

.mdataview_table input[type=checkbox],
.mdatadel_table  input[type=checkbox] {
  width: 10px;
}

.mdataview .mdataview_table .mdataview_in_table td{
  border:none; 
  padding:0 10px; 
}

.mdatadel .mdatadel_table .checkupdate_input{
  float:left;
}

.mdatadel .mdatadel_table .checkupdate_text{
  float:left;
  padding: 0 0 0 20px;
  margin-top: 5px;
}

.result_table {
  border-collapse: collapse;
  text-align: center;
  max-width: 800px;
  width: 100%;
  margin-right: auto;
}


.result_table th,
.result_table td {
  padding: 10px;
  border: 1px solid #333;
  font-size:14px;
  text-align: center;
  margin: 10px;
}
.result_table th {
  background-color: #2c88d9;
  color: #FFF;
  font-weight: normal;
}
.result_table input {
  width: 200px;
  width: 20%;
}

.musermng_table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  margin-top:20px;
  margin-bottom:20px;
}
.musermng_table th,
.musermng_table td {
  padding: 10px;
  border: 1px solid #333;
  font-size:120%;
  text-align: center;
  margin: 10px;
}
.musermng_table th {
  background-color: #2c88d9;
  color: #FFF;
  width: 20%;
}
.musermng_table input {
  width: 160px;
}

.mupload   .btn_01,
.mdownload .btn_01,
.mdataview .btn_01,
.mdatadel  .btn_01,
.musermng  .btn_01 {
  background: #eee;
  border-radius: 8px;
  border: 0;
  border-bottom: solid 4px #888;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  margin: 20px auto;
  font-weight: bold;
  padding: 10px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
}



.mlogin    .btn_02,
.mselect   .btn_02,
.mupload   .btn_02,
.mdownload .btn_02,
.mdataview .btn_02,
.mdatadel  .btn_02,
.musermng  .btn_02 {
  background: #108FC9;  
  border-radius: 8px;
  border: 0;
  border-bottom: solid 4px #064f70;  
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  margin: 20px auto;
  font-weight: bold;
  padding: 10px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
}

.mdatadel  .btn_03{
  background: #e94235;  
  border-radius: 8px;
  border: 0;
  border-bottom: solid 4px #ba3429;  
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  margin: 20px auto;
  font-weight: bold;
  padding: 10px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
}

.mdatadel  .btn_01.exe,
.mdatadel  .btn_02.exe,
.mdownload .btn_01.exe,
.mdownload .btn_02.exe,
.mdatadel  .btn_03.exe{
  margin: 10px auto;
}

.mlogin .btn_02 {
  width: 400px;
}

.mselect .btn_02 {
  width: 500px
}

.mupload   .btn_01,
.mdownload .btn_01,
.mdataview .btn_01,
.mdatadel  .btn_01,
.musermng  .btn_01,
.mupload   .btn_02,
.mdownload .btn_02,
.mdataview .btn_02,
.mdatadel  .btn_02,
.musermng  .btn_02,
.mdatadel  .btn_03 {
  width: 300px
}

.mupload   .btn_01:active,
.mdownload .btn_01:active,
.mdataview .btn_01:active,
.mdatadel  .btn_01:active,
.musermng  .btn_01:active,
.mlogin    .btn_02:active,
.mselect   .btn_02:active,
.mupload   .btn_02:active,
.mdownload .btn_02:active,
.mdataview .btn_02:active,
.mdatadel  .btn_02:active,
.musermng  .btn_02:active,
.mdatadel  .btn_03:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.musermng  .back_link:hover,
.mupload   .back_link:hover,
.mdownload .back_link:hover,
.mdataview .back_link:hover,
.mdatadel  .back_link:hover{
  text-decoration: none;
  color:#000;
}

.mdataview .mdataview_btn_area,
.mdatadel  .mdatadel_btn_area {
  padding: 20px;              /* 余白指定 */
  height: 150px;              /* 高さ指定 */
}

.mdataview .table_btn_area,
.mdatadel  .table_btn_area {
  text-align: center;
  max-width: 800px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}


.mlogin  .table th {
  background: #ededed;
  width: 30%;
  padding: 15px 3%;
  vertical-align: middle;
  font-size: 19px;
}

.mlogin  .table td {
  padding: 3% 2% 2% 2%;
  vertical-align: middle;
  font-size: 18px;
}

.mlogin    .midashi_01,
.mselect   .midashi_01,
.mupload   .midashi_01,
.mdownload .midashi_01,
.mdataview .midashi_01,
.mdatadel  .midashi_01,
.musermng  .midashi_01 {
  font-size: 22px;
  font-weight: bold;
  padding: 5px;
  margin: 20px;
  text-align: center;
}

.mlogin    .midashi_02,
.mselect   .midashi_02,
.mupload   .midashi_02,
.mdownload .midashi_02,
.mdataview .midashi_02,
.mdatadel  .midashi_02,
.musermng  .midashi_02 {
  background: #eee;
  padding: 10px 0 10px 30px;
  position: relative;
  text-align: left;
  font-size: 19px;
  font-weight: bold;
  /* margin: 1%; */
}

.mlogin    .midashi_02::after,
.mselect   .midashi_02::after,
.mupload   .midashi_02::after,
.mdownload .midashi_02::after,
.mdataview .midashi_02::after,
.mdatadel  .midashi_02::after,
.musermng  .midashi_02::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 4px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #e94235;
  border-radius: 4px;
}

.mlogin    .memo_01,
.mselect   .memo_01,
.mupload   .memo_01,
.mdownload .memo_01,
.mdataview .memo_01,
.mdatadel  .memo_01,
.musermng  .memo_01 {
  font-size: 16px;
  margin: 20px 10px;
}

.mupload   .memo_02,
.mdatadel  .memo_02{
  font-size: 17px;
  margin: 20px 10px;
  font-weight: bold;
}

.mlogin  .table input {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #fff2c7;
  border-color: black;
  outline: none;
  font-size: 18px; 
  font-weight: normal;
  width: 280px;
}

.musermng .pagination,
.mdataview .pagination,
.mdatadel  .pagination,
.mdownload .pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
}

.mdataview_table .radio-style-label,
.mdataview_table .check-style-label,
.mdatadel_table  .radio-style-label,
.mdatadel_table  .check-style-label {
  display: block;
  position: relative;
  padding-left: 28px;
  padding-top: 4px;
  font-size: 19px;
  font-weight: normal;
  cursor: pointer;
  text-align:left;
}

.mdataview_table .radio-style-label input,
.mdataview_table .check-style-label input,
.mdatadel_table  .radio-style-label input,
.mdatadel_table  .check-style-label input {
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 5px;
  margin: auto;
  width: auto;
  text-align:left;
}

.mdownload div[id="progress_m"],
.mupload  progress[id="progress_b"],
.mupload  div[id="progress_m"],
.mdatadel progress[id="progress_b"],
.mdatadel div[id="progress_m"]  {
  display:none;
}

.mupload  progress[id="progress_b"],
.mdatadel progress[id="progress_b"] {
  height: 2em;
  width: 16em;
  margin-left: 40px;
}

.mdownload div[id="progress_m"] {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
}

.mupload  div[id="progress_m"],
.mdatadel div[id="progress_m"]  {
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
}

.musermng_body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #ffffff;
}

.musermng .fonttitle {
  font-size: 1.8rem;
}

.musermng .fontdef {
  font-size: 1.5rem;
}

.musermng .alignCenter {
  text-align:  center;
}

.musermng .alignRight {
  text-align:  right;
}

.mselect .alignRight {
  text-align:  right;
}

/* ----- メンテナンス画面用 ----- */

.maintenance{
  position: relative;
  top: 30%;
  font-size: 16px;
  padding: 64px 32px 20px 32px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
}   

.maintenance-border{
  border: 2px solid #666;
}

.maintenance .maintenance-message{
  color: #fff;
  padding: 8px;
  background: #cc0000;
  font-size: 34px;
  margin-bottom: 24px;
  font-weight: bold;
}

.maintenance .maintenance-date{
  padding: 8px;
  font-size: 22px;
  font-weight: bold;
  width: 90%;
  margin: 0 auto 16px;
}

.sp_br{
  display: none;
}


@media(max-width: 768px){

  .maintenance{
    padding: 32px 10px 20px 10px;
  }   

  .maintenance .maintenance-message{
    font-size: 22px;
  }

  .maintenance .maintenance-date{
    font-size: 20px;
  }
  .sp_br{
    display:block;
  }

}