/*****************************************
*取り込み
 *****************************************/
 /* エラーメッセージ*/
 .error-msg  {
  font-size: 12px;
  font-weight: bold;
  color: #f80000;
  text-transform: uppercase;
  margin: 15px auto;
}

.error-msg {
  font-weight: normal;
  margin: 8px auto;
}
 
/* 二要素登録ボタン*/
 .regist-submit {
  border-radius: 5px;
  color: #fff;
  width: 200px;
  height: 36px;
  background: #519387;
  text-transform: uppercase;
}

.regist-submit:hover {
  background: #024d3f;
}

.regist-submit:disabled {
background: #dee0e0;
}

.regist-submit:disabled {
  background: #dee0e0;
}

/* 二要素選択ボタン（ショート） */ 
.alt-factor-button {
  display: table-cell;
  margin: 0;
  width: 70px;
  height: 36px;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  background: #519387;
  text-transform: uppercase;
}

.alt-factor-button:hover {
  background: #024d3f;
}

.alt-factor-header {
  display: block;
  margin: 0 0 10px 0;
  padding: 0 10px 0 10px;
}

.alt-factor-row {
  height: 36px;
  display: table;
  padding: 0 0 0 10px;
  margin: 5px;
}


/* コメント */
.tooltip {
  width: 100%;
  position: relative;
  display: inline-block;
  border-width: thin;
  text-align: center;
  font-size: 15px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 260px;
  background-color: #dee0e0;
  color: #4e5052;
  text-align: left;
  padding: 6px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 57%;
  font-size: 12px;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent grey transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*QRコードイメージ*/
.qrcode-img {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* 処理後 */
div.sameline {
  display:table;
  margin: 10px auto;
  padding: 0 10px 0 10px;
}

/*===============================================*
	ベース
*===============================================*/

body,p,form,input{
  margin: 0
 }
 
 
 body,h1,h2,div,input,a,p,footer,tr,th,td,label {
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#2a2f32;
 }
 
 #form{
     width: 750px;
     margin: 0px auto;
     }
 
 
 /* タグのスタイル */
 form p{
     font-size: 16px;
     }
 
 footer p{
     text-align: center;
     color: rgb(0,0,0);
     }
 
 h1 {
   text-decoration: none;
   font-size: 18px;
   width:685px; /* 画像サイズと一致  */
   padding: 10px 0px 10px 10px;
   border: 1px solid #013891;
   border-left: 6px solid #013891;
   margin: 10px 0px 0px 25px;
 }
 
 h2 {
   font-size: 14px;
   padding: .5em .75em;
   border-left: 6px solid #3498db;
 }
 
 th,tr,th,table {
  font-weight: normal;
   /* border: dashed;  */   /*あとでけす*/
 }

 td{
  /*  border: dotted;    */  /*あとでけす*/
 }
 
 .form-title{
     text-align: center;
     }
 
 .logo{
     text-align: center;
     margin-left:auto;
     margin-right:auto;
     margin-top: 30px;
     }
 
 .img_logo{
     width: 700px;
     height: 230px;
     }
 
 
 /*===============================================*
   ボタンレイアウト
 *===============================================*/
 
 /* ボタンのスタイル */
 .btn_base{
     display: inline-block;
     position: relative;
     height: 46px;
     width: 200px;
     padding: 0.5em 1.4em;
     text-decoration: none;
     font-size: 16px;
     border-radius: 5px;/* 角丸 */
     }
 
 .gleenBtn{
     background: #519387;
     color: #FFF;
     border-color: #488378;
 }

 .gleenBtn:hover {
     background: #024d3f;
}

.gleenBtn:disabled {
  background: #dee0e0;
}
 
 .grayBtn{
     background: #DDDDDD;
     color: gray;
     border-color: #DDDDDD;
 }
 
 .blueBtn{
     background: #013891;
     color: #FFF;
     border-color: #013891;
 }
 
 /*===============================================*
   パディング・マージン定義
 *===============================================*/
 /* マージン設定 */
 .ml20{
      margin-left:20px !important;
 }
 
 /* マージン設定 */
 .mAll20{
      margin:20px !important;
 }
 
 
 /*===============================================*
   要素位置情報
 *===============================================*/
 .text_C{
     color: red;
     text-align: center;
     }
 
 .text_Center{
     text-align: center;
     }
 
 .text_L{
     text-align: left;
     }
 
 .text_R{
     text-align: right;
     }
 
 .top_Box{
     border-radius: 5px; /* ボックスの四つ角を丸くする */ 
     border: 1px solid #a94442;
     height: 46px;
     width: 250px;
     font-size: 16px;
     }
     
     
 .top_inputBox{
     border-radius: 1px; /* ボックスの四つ角を丸くする */ 
     height: 30px;
     width: 250px;
     border: 1px solid #cccccc;
     font-size: 16px;
     }
 
 .text_Portal{
     color: #a94442;
     font-weight: bold;
     text-align: right;
     }
     
     
 .text_imputLabel{
     color: black;
     font-weight: bold;
     text-align: right;
     }
 /*
 .submit{
     text-align: center;
     text-transform: uppercase;
     }

 .submit_R{
     text-align: right;
     }
     */
     
 .a_TppLink{
      color: #519387;
      text-decoration: none;
     }
 
 .a_Link{
      color: black;
      text-decoration: none;
     }

      
 /*===============================================*
    テーブル定義 レイアウト
 *===============================================*/
 
 .div_tbl_center{
     text-align: center;
     }
 
 .tbl_center{
     margin-left: auto;
     margin-right: auto;
     width: 600px;
     border-spacing: 15px 10px;
  /*   border: solid;     */       /*あとでけす*/
     }
   
  .tbl_QA_center{
      margin-left: auto;
      margin-right: auto;
      width: 800px;
      border-spacing: 15px 10px;
    /*  border: solid;     */       /*あとでけす*/
  }
 
 
 /*===============================================*
    タブ変換
 *===============================================*/
 /*　9_baseInfo.html radio>タブ変換　*/
 .cp_tab *, .cp_tab *:before, .cp_tab *:after {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
 .cp_tab {
   margin: 1em auto;
   width: 600px;
     margin-left: auto;
     margin-right: auto;
     border: 1px solid #ddd;
 }
 .cp_tab > input[type='radio'] {
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 0;
   outline: none;
   background: none;
   -webkit-appearance: none;
           appearance: none;
   display: none;
 }
 
 .cp_tab .cp_tabpanel {
   display: none;
 }
 .cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
 .cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
 .cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3){
   display: block;
 }
 .cp_tab > label {
   position: relative;
   display: inline-block;
   padding: 15px;
   cursor: pointer;
   border: 1px solid transparent;
   border-bottom: 0;
   background-color: #EEEEEE;
   font-color: #DDDDDD;
   font-weight: bold;
 }
 
 .cp_tab > label:hover,
 .cp_tab > input:focus + label {
   color: #0066cc;
 }
 .cp_tab > input:checked + label {
   margin-bottom: -1px;
   border-color: #cccccc;
   background-color: #FFF;
   font-color: #DDDDDD;
   font-weight: bold;
   border-bottom: 1px solid #ffffff;/*背景色と同じ*/
 }
 .cp_tab .cp_tabpanel {
   padding: 0.5em 1em;
   border-top: 1px solid #cccccc;
 }
 
 @media (max-width: 480px) {
   .cp_tab {
     width: 100%;
     font-size: 0.8em;
   }
   .cp_tab label {
     padding: 0.5em;
 
   }
 }
 
 /*===============================================*
    メニューパーツ定義
 *===============================================*/
 
 .box_oya{
       width: 100px;
       top:0px;
       right:5px;
 }
 
 
 /*全体*/
 .hidden_box {
     margin: 2em 0;
     padding: 0;
 }
 
 
 
 /*ボタン装飾*/
 .hidden_box label {
     padding: 15px;
     font-weight: bold;
     background: #efefef;
     border-radius: 5px;
     cursor :pointer;
     transition: .5s;
 }
 
 /*ボタンホバー時*/
 .hidden_box label:hover {
     background: silver;
 }
 
 
 /*チェックは見えなくする*/
 .hidden_box input {
     display: none;
     
 }
 
 /*中身を非表示にしておく*/
 .hidden_box .hidden_show {
     height: 0;
     padding: 0;
     /*overflow: hidden;*/
     opacity: 0;
     transition: 0.8s;
   z-index:-1;/*最前面に*/
 }
 
 /*クリックで中身表示*/
 .hidden_box input:checked ~ .hidden_show {
     padding: 10px 0px;
     height: auto;
     opacity: 1;
   z-index: 9999;/*最前面に*/
       position: absolute;
 }
 
 .hidden_show{
   z-index: 9999;/*最前面に*/
     background-color: #fff;/*背景色*/
       position: absolute;
       top:0px;
       right:0px;
 }
 /*===============================================*
    スマホ対応
 *===============================================*/
 @media screen and (max-width:640px){
 
 .img_logo{
     width: 500px;
     height: 200px;
     }
 
 h1 {
   width:480px; /* 画像サイズと一致  */
   margin: 0px;
 }
 
 tr,td,th{
     width: 100%;
     display: block;
     /*border: dashed;   */      /*あとでけす*/
     }
 
 #form{
     width: 500px;
     }
 
 .text_R{
     text-align: left;
     width: 100%;
     }

  .text_Center{
      text-align: left;
      width: 100%;
    } 
 
 .text_L{
     width: 100%;
     }
 
 .div_tbl_center{
     text-align: left;
     }
 
 .tbl_center{
     margin-left: auto;
     margin-right: auto;
     width: 400px;
     border-spacing: 15px 10px;
     }
     
/* .submit_R{
     text-align: left;
     }*/

 .tooltip{
      text-align: left;
    }

  .tooltip .tooltiptext {
      left: 30%;
    }
    
 }



.backupFactorChooser {
  display: none;
  transition: visibility 5s, opacity 0.5s linear;
}


/****************************************
以降デフォルトのスタイル（未使用なら削除）


*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  background: #ededed;
}

input, button {
  border: none;
  outline: none;
  background: none;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.alt-factor-pane {
  display: table;
  padding: 0 0 0 50px;
  width: 95%;
}


.alt-factor-text {
  display: table-cell;
  font-size: 12px;
  color: #4e5052;
  text-transform: uppercase;
  padding: 0 0 0 10px;
}

button {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin-top: 15px;
}

select {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  text-align: center;
  text-align-last: center;
}

div.hr {
  display: flex;
  width: 100%;
  margin: 15px auto;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
  margin: 10px auto;
}

hr.left {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
  margin: 10px;
  width: 45%;
}

hr.right {
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
 margin: 10px;
 width: 45%;
}

h2 {
  width: 100%;
  font-size: 26px;
  text-align: center;
  color: #4e5052;
}

h2.on__dark {
  color: #fff;
}

h3 {
  width: 100%;
  font-size: 22px;
  color: #606060;
  padding: 0 0 15px 0;
  text-align: center;
}



label span {
  font-size: 12px;
  color: #4e5052;
  text-transform: uppercase;
}

span.hr-text {
  font-size: 14px;
  color: #4e5052;
  padding: 0px;
  text-align: center;
  text-transform: uppercase;
}

input {
  width: 250px;
  margin: 3px auto;
  padding-bottom: 1px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  text-align: center;
}

input[type="checkbox"] {
  width: 8%;
  vertical-align: top;
}

input.on__error {
  border-bottom: 1px solid red;
}

.external-idp-btn {
    padding: 7px;
    width: 40px;
    box-sizing: content-box;
    cursor: pointer;
}

.tip {
  font-size: 20px;
  margin: 40px auto 50px;
  text-align: center;
}

.slogan {
  text-shadow: -1px 1px 1px #aeaeb7;
}

.cont {
  overflow: hidden;
  position: relative;
  background: #fff;
  width: 900px;
  height: 650px;
  margin: 0 auto 100px;
  resize: vertical;
  min-height: 650px;
  box-shadow: -7px 7px 5px #aeaeb7;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form {
  overflow-y: auto;
  position: relative;
  
  transition: -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
  margin: 10px 10px;
}

.sub-cont {
  overflow: hidden;
  position: absolute;
  left: 640px;
  top: 0;
  width: 900px;
  height: 100%;
  padding-left: 260px;
  background: #fff;
  transition: -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}



.qrcode-text {
  font-weight: normal;
}










span.info {
  display: inline;
  width: 100%;
  font-size: 14px;
  color: #4e5052;
  padding: 0px;
  text-align: center;
}

.device-name {
  display: inline;
  width: 100%;
  font-size: 12px;
  color: #4e5052;
  padding: 0px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

a {
  display: inline;
  width: 100%;
  font-size: 14px;
  color: #606060;
  padding: 0px;
  text-align: center;
}



.error-msg-detail  {
  font-size: 11px;
  font-weight: normal;
  color: #f80000;
  text-transform: uppercase;
  margin: 3px auto;
}

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #606060;
  text-transform: uppercase;
  text-decoration: underline;
}

.submit {
  background: #f80000;
  text-transform: uppercase;
}

.submit:hover {
  background: #e60000;
}

.submit:disabled {
  background: #dee0e0;
}

.alt {
  background: #3355cc;
}

.disabled {
  background: #808080;
}



.idp-btn {
  color: #FFFFFF;
  background: #800000;

}
.idp-btn span {
  font-weight: bold;
  color: #000000;
}





.consent {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.consenttext {
  height:150px;
  background: #dddddd;
  overflow-y: scroll;
}

.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 32px;
}



.icon-link--twitter {
  left: auto;
  right: 5px;
}


.mob-header {
  display: none;
}

.mob-sin-sup {
  display: none;
}

@media (max-width: 414px) {

  html,body {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  html {
    height: 100%;
    width: 100%;
  }

  body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-kerning: normal;
  }

  .cont {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding-top: 50px;
    margin: 0 auto;
  }

  .form {
    width: 100%;
    margin: 5px 0 5px 0;
    padding: 5px;
  }

  .sub-cont {
    overflow: hidden;
    position: absolute;
    left: 100%;
    top: 50px;
    width: 100%;
    height: 92vh;
    padding-left: 0;
    background: #fff;
    transition: -webkit-transform 2.0s ease-in-out;
    transition: transform 2.0s ease-in-out;
    transition: transform 2.0s ease-in-out, -webkit-transform 2.0s ease-in-out;
  }

  p.tip {
    display: none;
  }

  h3 {
    font-size: 18px;
    padding: 0 0 5px 0;
  }


  .mob-header {
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    z-index:10;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50px;
    float: left;
    background: linear-gradient(to left, #808080, #fff);
    padding: 17px 0;
  }

  .slogan {
    font-size: 12px;

  }



  .mob-sin-sup {
    display: table;
    text-align: center;
    margin: 0 auto;
  }


    label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 290px;
      margin: 15px auto;
      text-align: center;
    }

    div.newline {
      padding: 0 10px 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }

}


///////////////////////////////////////////////
//ログインの切替は未使用
///////////////////////////////////////////////
.img__btn {
  overflow: hidden;
  z-index: 2;
  position: relative;
  width: 130px;
  height: 36px;
  margin: 0 auto;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
  cursor: pointer;
  transform: translateZ(0); 
}

.img__btn:after {
  content: '';
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 30px;
}

.img__btn span {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 1.2s;
  transition: transform 1.2s;
  transition: transform 1.2s, -webkit-transform 1.2s;
}

.img__btn span.m--in {
  -webkit-transform: translateY(-72px);
          transform: translateY(-72px);
}

  .img {
    overflow: hidden;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding-top: 0;
    background: lightgrey;
  }

  .img:before {
    content: '';
    position: absolute;
    top: 0;

    background-image: url("../images/background.png");
    background-size: cover;
    transition: -webkit-transform 2.0s ease-in-out;
    transition: transform 2.0s ease-in-out;
    transition: transform 2.0s ease-in-out, -webkit-transform 2.0s ease-in-out;
  }

  .img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }
  
  .img {
  overflow: hidden;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  padding-top: 360px;
}

.img:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 900px;
  height: 100%;
  background-image: url("../images/background.png");
  background-size: cover;
  transition: -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

.img:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  transform: translateZ(0);
}

}
.img__text {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  transition: -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

.img__text h2 {
  margin-bottom: 10px;
  font-weight: normal;
}

.img__text p {
  font-size: 14px;
  line-height: 1.5;
}

.icon-link img {
  width: 100%;
  vertical-align: top;
}

///////////////////////////////////////////////
//ログインのサインアップ、サインインは未使用
///////////////////////////////////////////////
.sign-up {
  -webkit-transform: translate3d(-900px, 0, 0);
          transform: translate3d(-900px, 0, 0);
}

.cont.s--signup .sign-up {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.cont.s--signup .sub-cont {
  -webkit-transform: translate3d(-640px, 0, 0);
          transform: translate3d(-640px, 0, 0);
}
.cont.s--signup .img__text.m--up {
  -webkit-transform: translateX(520px);
          transform: translateX(520px);
}

.img__text.m--in {
  -webkit-transform: translateX(-520px);
          transform: translateX(-520px);
}

.cont.s--signup .img__text.m--in {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transform: translateZ(0); 
}



.cont.s--signup .img__btn span.m--in {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.cont.s--signup .img__btn span.m--up {
  -webkit-transform: translateY(72px);
          transform: translateY(72px);
}

.cont.s--signup .sub-cont {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  
.sign-in {
  transition-timing-function: ease-out;
}

.cont.s--signup .sign-in {
  transition-timing-function: ease-in-out;
  transition-duration: 1.2s;
  -webkit-transform: translate3d(640px, 0, 0);
          transform: translate3d(640px, 0, 0);
}

.cont.s--signup .img:before {
  -webkit-transform: translate3d(640px, 0, 0);
          transform: translate3d(640px, 0, 0);


*****************************************/