@charset "utf-8";
/* CSS Document */

/*

 -- home --

*/
div.close { display:none; }

html,
body {
  padding:0;
  margin:0;
  background:#eee;
}
html {
  overflow-y:scroll;
  height:100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  min-height:100%;
  display:flex;
  flex-direction:column;
  line-height:1.5;
}
header{
  background:#fff;
  margin:0;
  padding:10px;
}
  header #logo {
    margin:10px;
  }
  header div {
    width:90%;
    max-width:800px;
    margin:0 auto;
  }
  header #logo_img {
    width:179px;
    height:28px;
  }
  header h1 {
  }
  header h1 + p {
  }
section {
  margin:0;
  flex: 1 1 auto;
}
  section > div {
    width:90%;
    max-width:800px;
    margin:20px auto;
    overflow:hidden;
  }
  section > div.first > p {
    font-weight:bold;
    color:#0BAB2C;
    font-size:120%;
    text-align:center;
    background:#fff;
    border-radius:6px;
    padding:20px 10px;
    position:relative;
    box-shadow:rgba(0,0,0,0.2) 0 2px 4px;
    z-index:10;
  }
    section > div.first > p:after {
      content: "▼";
      color:#fff;
      position:absolute;
      bottom:-20px;
      left:50%;
      font-size:20px;
      margin-left:-10px;
      text-shadow:rgba(0,0,0,0.2) 0 2px 4px;
      z-index:0;
    }
  section div.labelbox {
  }
  section label.btn {
    display:block;
    width:25%;
    min-width:13em;
    text-align:center;
    float:left;
    background:#225DC5;
    padding:15px;
    border-radius:4px;
    margin:10px;
    color:#fff;
    font-weight:bold;
    text-shadow:#1D2553 2px 2px 0;
    box-shadow:#1C387B 0 3px 0;
    border-bottom:1px solid #3D76C3;
  }
  section label.btn:hover,
  section label.btn:active {
    cursor:pointer;
    margin:13px 10px 6px;
    box-shadow:none;
    border-top:1px solid #244174;
  }
  section label.btn:active {
    background:#5772F1;
  }
    section label.btn input {
      display:none;
    }
  section div {
    clear:both;
    overflow:hidden;
  }
    section > .box {
      background:#FFFFFF;
      overflow:hidden;
      margin-top:20px;
      padding:20px;
      width:80%;
      max-width:760px;
      position:relative;
    }
    section > .box h1,
    section > .box h2 {
      color:#225DC5;
      border-bottom:2px solid #225DC5;
      margin:0;
    }

    section .q2 {
      border-top:2px dotted #FF6910;
      margin:20px 0 0;
      text-align:center;
      font-size:20px;
      font-weight:bold;
    }

    section > .boxeKYC {
      background:#FFFFFF;
      overflow:hidden;
      margin-top:20px;
      padding:20px;
      /*width:80%; */
      max-width:760px;
      position:relative;
    }
    section > .boxeKYC h1,
    section > .boxeKYC h2 {
      color:#225DC5;
      border-bottom:2px solid #225DC5;
      margin:0;
    }

    section .boxeKYC q2 {
      border-top:2px dotted #FF6910;
      margin:20px 0 0;
      text-align:center;
      font-size:20px;
      font-weight:bold;
    }

    section .resizeimage {
     width:100%;
     margin:auto;
    }
      section .q2 .btn,
      section .q1.both .btn {
        display:inline-block;
        width:80%;
        max-width:16em;
        text-align:center;
        background:#FF7E00;
        padding:15px;
        border-radius:4px;
        margin:10px;
        color:#fff;
        font-weight:bold;
        text-shadow:#4F2200 2px 2px 0;
        box-shadow:#7C3E00 0 3px 0;
        border-bottom:1px solid #FFB346;
        text-decoration:none;
      }
        section .q2 .btn:hover,
        section .q2 .btn:active {
          cursor:pointer;
          background:#FF9E3F;
        }

section .boxeKYC.q1 .btn {
  display:block;
  width:auto;
  max-width:14em;
  text-align:center;
  background:#225DC5;
  padding:15px;
  border-radius:4px;
  margin:30px auto;
  color:#fff;
  font-weight:bold;
  text-shadow:#1D2553 2px 2px 0;
  box-shadow:#1C387B 0 3px 0;
  border:none;
  border-bottom:1px solid #3D76C3;
  font-size:20px;
  text-decoration:none;
}
section .boxeKYC.q1 .btn:hover,
section .boxeKYC.q1 .btn:active {
  cursor:pointer;
  margin:33px auto 26px;
  box-shadow:none;
  border-top:1px solid #244174;
}

footer {
  background:#333;
  padding:20px;
  margin:50px 0px 0px;
}
#footer .copyright {
	text-align: center;
    font-weight: 400;
    font-size: small;
    color: #FFF;
}


@media screen and (max-width:768px) {
  h1 { font-size:120%; }
  section > div.first > p { font-size:100%; }
  section label.btn {
    min-width:84%;
    }
}

/*

 -- input --

*/
form > div {
  border-top:1px dotted #ccc;
  margin:15px 0;
  padding:15px 0 0;
  font-size:20px;
}

form > div > label {
  font-weight:bold;
  width:200px;
  display:inline-block;
}

form > div > label.error {
  font-weight:bold;
  width: auto;
  display:inline-block;
}

form > div > input,
form > div > select {
  font-size:20px;
  margin:0 5px 5px 0;
  padding:5px;
  border:3px solid #3d8ecc;
  border-radius:4px;
  background-color:#FFFFFF;
}
  form > div > input:active,
  form > div > input:focus {
    background:rgba(212,241,255,1.00);
    box-shadow:none;
  }
form > div > input { width:5em; }
form > div > input.mail { width:15em; max-width:94%; }
form > div > input.mail2 { margin-left:206px; width:15em; max-width:94%; }
form > div > input.password { width:15em; max-width:94%; margin-left:256px; margin-top:-35px; }
form > div > input.password2 { margin-left:256px; width:15em; max-width:94%; }
form > div > input.ekycPassword { width:16em; max-width:94%; margin-top:-40px; }
form > div > input.ekycPassword2 { margin-left:205px; width:16em; max-width:94%; }

form > div > .comment {
  font-size:14px;
  display:block;
  margin-left:207px;
}

form > .btn {
  display:block;
  width:auto;
  max-width:20em;
  text-align:center;
  background:#225DC5;
  padding:15px;
  border-radius:4px;
  margin:30px auto;
  color:#fff;
  font-weight:bold;
  text-shadow:#1D2553 2px 2px 0;
  box-shadow:#1C387B 0 3px 0;
  border:none;
  border-bottom:1px solid #3D76C3;
  font-size:20px;
  text-decoration:none;
}
  form > .btn:hover,
  form > .btn:active {
    cursor:pointer;
    margin:33px auto 26px;
    box-shadow:none;
    border-top:1px solid #244174;
  }

  form > .btn:disabled {
    background:#cccccc;
    margin:30px auto;
    color:#999;
    text-shadow:none;
    box-shadow:none;
    border:none;
    border-bottom:none;
  }

.linkbutton {
  display:block;
  width:auto;
  max-width:10em;
  text-align:center;
  background:#225DC5;
  padding:15px;
  border-radius:4px;
  margin:30px auto;
  color:#fff;
  font-weight:bold;
  text-shadow:#1D2553 2px 2px 0;
  box-shadow:#1C387B 0 3px 0;
  border:none;
  border-bottom:1px solid #3D76C3;
  font-size:20px;
  text-decoration:none;
}
.linkbutton:hover {
    cursor:pointer;
    margin:33px auto 26px;
    box-shadow:none;
    border-top:1px solid #244174;
}

.error {
  color:#FF395E;
  font-weight:bold;
  background:#FFE5EB;
  padding:5px;
  font-size:15px;
}
  .error:before {
    content: "!";
    color:#fff;
    background:#FF395E;
    display:inline-block;
    width:1.5em;
    text-align:center;
    margin-right:5px;
  }

span.red {
	color:#ff0000;
}

.accountIdNum {
	font-size: xx-large;
	font-weight:bold;
}

label.password {
	display: block;
	font-weight:bold;
	text-align: center;
	width: 250px;
}

label.accountIdDisplay {
	font-weight: 500;
	width: 400px;
	font-size: x-large;
	line-height: 200%;
}

label.accountId {
	padding-left: 10px;
	word-wrap: break-word;
	font-weight:600;
	width: 80%;
	font-size: xx-large;
}

span.ib { display:inline-block; }

label.passwordLabel {
	font-size: xx-large;
}

.mod-copytarget input {
    width: 9.5em;
    cursor: pointer;
    border: none;
    border-bottom: 1px dashed #1152cc;
    background-color: #FFE5EB;
    font-size: 100%;
}

@media screen and (max-width:768px) {
  form > div > label { display:block; }
  form > div > input.mail2 { margin-left:0; }
  form > div > input.password { margin-left:0; margin-top: 0; }
  form > div > input.password2 { margin-left:0; }
  form > div > input.ekycPassword { margin-left:0; margin-top: 0; }
  form > div > input.ekycPassword2 { margin-left:0; }
  form > div > .comment { margin-left:5px; }
}

/*

 -- complete --

*/
strong {
  font-weight:bold;
  font-size:120%;
  padding:5px 10px;
  background:#FFFCE1;
}
a.lnk {
  display:block;
  width:auto;
  text-decoration:none;
  color:#3d8ecc;
  margin:15px 0 5px 15px;
}
  a.lnk:before {
    content: ">";
    font-weight:bold;
    color: #3d8ecc;
    margin-right:5px;
  }
@media screen and (max-width:768px) {
  a.lnk { margin-left:0; }
}