@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  font-family: Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  color: #434343;
  letter-spacing: 0.05em;
  line-height: 1.4; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none;
  color: #434343;
  opacity: 1; }
  a:hover {
    opacity: 0.7; }

body {
  overflow: auto;
  background: #f7e3be; }
  body:before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -999;
    display: block;
    background: url("https://imaging.jugem.jp/images/portal/index/top_bg.jpg?20160310") no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    filter: blur(4px); }
    @media screen and (max-width: 479px) {
      body:before {
        display: none; } }
  body a {
    cursor: pointer; }

header {
  display: block;
  padding: 30px 0 15px;
  text-align: center; }
  @media screen and (max-width: 479px) {
    header {
      padding: 20px 0 7px; } }
  header img {
    width: 125px;
    height: 43px; }
    @media screen and (max-width: 479px) {
      header img {
        width: 95px;
        height: 33px; } }

.wrapper {
  z-index: 1;
  width: 500px;
  margin: 0 auto 15px;
  padding-bottom: 35px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eee;
  border-radius: 4px; }
  @media screen and (max-width: 999px) {
    .wrapper {
      width: auto;
      margin: 0 15px 15px;
      background: rgba(255, 255, 255, 0.95); } }
  .wrapper .signup__caption {
    padding: 35px 10px 25px;
    text-align: center;
    color: #434343; }
    @media screen and (max-width: 479px) {
      .wrapper .signup__caption {
        padding: 22px 10px; } }
    .wrapper .signup__caption h2 {
      font-weight: bold;
      margin-bottom: 8px; }
    .wrapper .signup__caption p {
      font-size: 14px;
      line-height: 1.5em; }
      @media screen and (max-width: 479px) {
        .wrapper .signup__caption p {
          font-size: 12px; } }
  .wrapper .signup__caption--complete {
    padding: 35px 15px 0;
    margin-bottom: 10px; }
    .wrapper .signup__caption--complete h2 {
      margin-bottom: 15px; }
    .wrapper .signup__caption--complete .complete-caption__figure {
      display: inline-block;
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
      background: #f3e8cc;
      border-radius: 50%; }
      @media screen and (max-width: 479px) {
        .wrapper .signup__caption--complete .complete-caption__figure {
          width: 70px;
          height: 70px;
          margin-bottom: 20px; } }
      .wrapper .signup__caption--complete .complete-caption__figure figure {
        margin-top: 17px;
        color: #e2cb8e;
        font-size: 3em; }
        @media screen and (max-width: 479px) {
          .wrapper .signup__caption--complete .complete-caption__figure figure {
            margin-top: 16px;
            font-size: 2.5em; } }
  .wrapper .signup__form {
    margin: 0 40px; }
    @media screen and (max-width: 479px) {
      .wrapper .signup__form {
        margin: 0 10px; } }
    .wrapper .signup__form .input-list {
      margin-bottom: 20px; }
      @media screen and (max-width: 479px) {
        .wrapper .signup__form .input-list {
          margin-bottom: 15px; } }
      .wrapper .signup__form .input-list input:focus {
        outline: none; }
      .wrapper .signup__form .input-list .input-list__inner {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        -webkit-appearance: none;
        border: solid 1px #cacaca;
        font-size: 14px;
        border-radius: 4px; }
    .wrapper .signup__form .input-list--url {
      width: 100%;
      background: #fff;
      padding: 0 10px !important;
      display: -ms-flexbox;
      display: flex;
      display: -webkit-flex;
      -ms-flex-align: center;
      align-items: center; }
      .wrapper .signup__form .input-list--url span {
        display: inline-block;
        padding: 8px 0;
        box-sizing: border-box;
        color: #a2a2a2; }
        @media screen and (max-width: 479px) {
          .wrapper .signup__form .input-list--url span {
            font-size: 12px; } }
      .wrapper .signup__form .input-list--url .input-id__url--input {
        box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-flex: 1;
        box-sizing: border-box;
        padding: 8px 0;
        -webkit-appearance: none;
        border: none;
        font-size: 14px;
        margin: 0 8px; }
        @media screen and (max-width: 479px) {
          .wrapper .signup__form .input-list--url .input-id__url--input {
            margin: 0 2%; } }
    .wrapper .signup__form .attention_wrap {
      margin-top: 10px;
      padding: 10px;
      text-align: left;
      font-size: 14px;
      line-height: 2em;
      background: #f3e8cc; }
      @media screen and (max-width: 479px) {
        .wrapper .signup__form .attention_wrap {
          font-size: 12px; } }
  .wrapper .complete-information {
    margin-bottom: 25px;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    word-wrap: break-word;
    background: #c5e2e6; }
    .wrapper .complete-information a {
      text-decoration: underline; }
    .wrapper .complete-information li {
      margin-bottom: 5px; }
      @media screen and (max-width: 479px) {
        .wrapper .complete-information li {
          margin-bottom: 10px; } }
      .wrapper .complete-information li:last-child {
        margin-bottom: 0; }
    .wrapper .complete-information .information_url_icon {
      margin-left: 5px;
      font-size: 0.9em; }
  .wrapper .error_msg {
    display: block;
    margin-bottom: 2px;
    color: #cc0000;
    font-size: 14px; }
    @media screen and (max-width: 479px) {
      .wrapper .error_msg {
        font-size: 12px; } }
  .wrapper .error_msg--ip {
    margin-bottom: 20px;
    padding: 10px 15px;
    background-color: #ec6a5c;
    font-size: 0.85em;
    color: #fff;
    line-height: 1.6em; }
    .wrapper .error_msg--ip a {
      color: #fff;
      font-weight: bold;
      text-decoration: underline; }
    @media screen and (max-width: 479px) {
      .wrapper .error_msg--ip {
        margin: -25px -10px 20px; } }
  .wrapper .error_msg--term-of-use {
    margin-bottom: 7px; }
  .wrapper .input-list__url {
    text-align: center; }
    .wrapper .input-list__url div {
      background: #eef6f9;
      padding: 10px 0; }
      .wrapper .input-list__url div p {
        display: inline;
        font-weight: bold; }
        @media screen and (max-width: 479px) {
          .wrapper .input-list__url div p {
            font-size: 12px; } }
      .wrapper .input-list__url div input {
        width: 190px !important; }
        @media screen and (max-width: 479px) {
          .wrapper .input-list__url div input {
            width: 150px !important; } }
  .wrapper .input-list__caption {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
    margin-bottom: 5px; }
    .wrapper .input-list__caption span {
      margin-right: auto; }
    .wrapper .input-list__caption a {
      font-size: 12px;
      color: #0084c0; }
  .wrapper .signup__terms-of-use {
    text-align: center;
    font-size: 14px;
    margin-bottom: 30px; }
    .wrapper .signup__terms-of-use a {
      color: #0084c0;
      text-decoration: none; }
      .wrapper .signup__terms-of-use a:hover {
        opacity: 0.7; }
    .wrapper .signup__terms-of-use label {
      cursor: pointer; }
      .wrapper .signup__terms-of-use label input {
        margin: 0;
        vertical-align: middle; }
      .wrapper .signup__terms-of-use label .checkbox {
        display: none; }
      .wrapper .signup__terms-of-use label .checkbox-icon {
        margin-right: 7px; }
      .wrapper .signup__terms-of-use label .checkbox + .checkbox-icon {
        position: relative;
        vertical-align: middle; }
      .wrapper .signup__terms-of-use label .checkbox + .checkbox-icon:before {
        padding: 4px 5px;
        font-family: "Ionicons";
        content: "\f122";
        color: #fff;
        font-size: 15px;
        background: #fff;
        border: 1px solid #cacaca;
        border-radius: 2px; }
      .wrapper .signup__terms-of-use label .checkbox:checked + .checkbox-icon:before {
        font-family: "Ionicons";
        content: "\f122";
        color: #0084c0;
        background: #eef6f9; }
  .wrapper .button {
    text-align: center; }
    .wrapper .button input,
    .wrapper .button a {
      padding: 10px 50px;
      background: #0084c0;
      border: none;
      -webkit-appearance: none;
      font-size: 15px;
      color: #fff;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer; }
      .wrapper .button input:hover,
      .wrapper .button a:hover {
        opacity: 0.8; }
      @media screen and (max-width: 999px) {
        .wrapper .button input,
        .wrapper .button a {
          display: block;
          width: 100%; } }
  .wrapper .button--complete {
    display: block;
    margin-bottom: 1em;
    text-align: center; }
    .wrapper .button--complete a {
      display: block;
      padding: 12px 0;
      background: #0084c0;
      font-size: 15px;
      color: #fff;
      border-radius: 4px; }
      .wrapper .button--complete a:hover {
        opacity: 0.8; }
      @media screen and (max-width: 479px) {
        .wrapper .button--complete a {
          font-size: 0.9em; } }
  @media screen and (max-width: 479px) {
    .wrapper .button--complete-pc {
      display: none; } }
  .wrapper .button--complete-smp {
    display: none; }
    @media screen and (max-width: 479px) {
      .wrapper .button--complete-smp {
        display: block; } }
  .wrapper .button--complete-sub {
    display: block;
    text-align: center;
    font-size: 15px; }
    .wrapper .button--complete-sub a {
      color: #0084c0; }
  .wrapper .free-signup-button a {
    background: #ff9c87 !important;
    width: auto; }

.signup__sub {
  text-align: center; }
  .signup__sub .signup__sub--caption {
    color: #dcdcdc;
    font-size: 0.9em;
    margin: 2em 0; }
    @media screen and (max-width: 479px) {
      .signup__sub .signup__sub--caption {
        margin: 1em 0; } }
  .signup__sub .signup__sub--line {
    display: table;
    white-space: nowrap; }
    @media screen and (max-width: 479px) {
      .signup__sub .signup__sub--line {
        display: block; } }
    .signup__sub .signup__sub--line:after, .signup__sub .signup__sub--line:before {
      content: "";
      display: table-cell;
      width: 50%;
      background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
      background-size: 100% calc(100%); }
    .signup__sub .signup__sub--line:after {
      border-left: 2em solid transparent; }
    .signup__sub .signup__sub--line:before {
      border-right: 2em solid transparent; }
    @media screen and (max-width: 479px) {
      .signup__sub .signup__sub--line:before, .signup__sub .signup__sub--line:after {
        display: none; } }
    .signup__sub .signup__sub--line span {
      display: inline-block;
      padding: 0 1.5em;
      color: #a2a2a2; }
      @media screen and (max-width: 479px) {
        .signup__sub .signup__sub--line span {
          display: inline;
          padding: 0;
          font-size: 0.85em; } }

.login {
  text-align: center;
  margin-bottom: 30px;
  font-size: 14px; }
  @media screen and (max-width: 479px) {
    .login {
      font-size: 12px; } }

.annotation {
  width: 500px;
  margin: 0 auto 0;
  font-size: 14px; }
  @media screen and (max-width: 999px) {
    .annotation {
      width: auto;
      margin: 0 15px; } }
  @media screen and (max-width: 479px) {
    .annotation {
      font-size: 12px; } }
  .annotation ul {
    list-style-type: disc;
    list-style-position: inside; }

.login-annotation .login-annotation__info {
  margin: 2em 0;
  text-align: center; }
  .login-annotation .login-annotation__info a {
    display: block; }
    .login-annotation .login-annotation__info a i {
      font-size: 1.2em; }
  .login-annotation .login-annotation__info .login-annotation__sub-login-btn {
    position: relative;
    margin-bottom: 1.5em; }
    .login-annotation .login-annotation__info .login-annotation__sub-login-btn a {
      padding: 1em;
      color: #0084c0;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 4px; }
      .login-annotation .login-annotation__info .login-annotation__sub-login-btn a:after {
        font-family: "FontAwesome";
        content: "\f105";
        font-size: 1.5em;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        width: 1em;
        height: 1em;
        margin: auto;
        line-height: 1em; }
      .login-annotation .login-annotation__info .login-annotation__sub-login-btn a:hover {
        opacity: 0.9; }

@media screen and (max-width: 479px) {
  .login-annotation {
    margin-bottom: 15px; } }

.login-annotation ul li {
  line-height: 1.7em; }
  @media screen and (max-width: 479px) {
    .login-annotation ul li {
      line-height: 1.8em; } }

.recaptcha__wrapper {
  height: 100px;
  display: flex;
  justify-content: center;
}

#submit:disabled {
  opacity: 0.8;
  background: #ccc;
  cursor: default;
  pointer-events: none;
}

#submit.clicked {
  opacity: 0.8;
  cursor: wait;
  pointer-events: none;
}
/*# sourceMappingURL=signup.css.map */