@charset "UTF-8";

p.please {
  margin-top: 4em;
  font-size: 100%;
  color: #916646;
  text-align: center;
  letter-spacing: 0.1em;
}

/* password eye icon */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
  width: 100%;
  padding-right: 42px;
}
.password-wrapper .toggle-password {
  cursor: pointer;
  width: 42px;
  height: 37px;
  padding: 0;
  color: #9161b6; /* wistaria */
  font-size: 1.2em;
  background: #f0daf5;
  border: none;
  position: absolute;
  right: 1px;
  top: 1px;
}

/* error input */
input.has-error,
input#zip.has-error,
input#address.has-error {
  background-color: #fff0f0;
}
/* error text */
.error-message {
  color: var(--wisteria);
  font-size: 0.9em;
  letter-spacing: 0.1em;
  margin-top: 1em;
}


/* mailform */
table.profile-table {
  width: 90%;
  margin: 30px auto 100px;
  }
  table.profile-table tr th,
  table.profile-table tr td {
    text-align: left;
    font-weight: normal;
    font-family: 'Lato', sans-serif;
  }
  table.profile-table tr th {
    width: auto;
    font-size: 93%;
    letter-spacing: 0.1em;
    color: var(--pastel_red);
    padding-bottom: 0.5em;
    padding-top: 3em;
  }
  table.profile-table tr td {
    padding-bottom: 3em;
    border-bottom: 1px dotted #ddd;
  }
  /* label */
  table.profile-table tr td label.form-label {
    width: 1em;
    font-size: 93%;
    letter-spacing: 0.1em;
    color: var(--light_violet);
  }

/* input common */
table.profile-table tr td input {
  width: calc(100% - 22px);
  padding: 10px;
  font-size: 108%;
  letter-spacing: 0.1em;
  color: var(--light_gray);
  border: 1px solid var(--light_violet);
  }
  table.profile-table tr td input.input-name {
    width: calc(50% - 22px - 1.5em); /* adjust */
    padding: 10px;
    font-size: 108%;
    letter-spacing: 0.1em;
    color: var(--light_gray);
    border: 1px solid var(--light_violet);
    }
  /* 〒 */
  input#zip {
    width: 38%;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    border: 1px solid var(--light_violet);
    }
    /* placeholder */
    input#zip[placeholder] {
      color: #ccc;
    }
    input::focus::placeholder {
      color: transparent;
    }
    input#zip[type="text"]{
      color: var(--light_gray);
  }
  /* placeholder end */
  input#address {
    width: calc(100% - 22px);
    height: auto;
    padding: 10px;
    font-size: 108%;
    letter-spacing: 0.1em;
    color: var(--light_gray);
    border: 1px solid var(--light_violet);
    background: var(--white);

  }
  /* 〒 end */

  /* submit btn */
  table.profile-table tr td:has(input.submit-btn) {
    padding-top: 3em;
    border-bottom: none;
    }
    /* submit btn */
    table.profile-table tr td input.submit-btn {
      cursor: pointer;
      font-family: 'Lato', sans-serif;
      width: 140px;
      height: 42px;
      margin-right: 10px;
      font-size: 92%;
      text-align: center;
      color: var(--white);
      background: var(--wisteria);
      float: left;
      border: none;
}
/* mailform end */

/* 更新完了文言 */
div.info-update {
  width: 90%;
  max-width: 550px;
  margin: 85px auto 85px;
  padding: 30px 0px 30px; 
  font-size: 100%;
  color: var(--wisteria);
  text-align: center;
  letter-spacing: 0.1em;
  border-top: 2px solid var(--wisteria);
  border-bottom: 2px solid var(--wisteria);
  clear: both;
}
/* 更新完了文言 end */