@charset "UTF-8";
#key {
  margin-bottom: 71px;
}
#key.key--info1 {
  margin-bottom: 54px;
}
#key.key--info3 {
  margin-bottom: 63px;
}
#key.key--info4 {
  margin-bottom: 54px;
}
#key.key--info5 {
  margin-bottom: 57px;
}

.wrap {
  padding: 0;
}

section {
  padding-bottom: 50px;
}

.info__box {
  background: #fafafa;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: block;
  padding: 53px 49px 50px;
  box-sizing: border-box;
}
.info__box .info__title {
  color: #3b2a89;
  border-bottom: 2px solid;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  padding-bottom: 11px;
}
.info__box .info__link {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
}
.info__box .info__link li {
  padding: 20px 0 21px 21px;
  border-bottom: 1px solid #d9d9d9;
}
.info__box .info__link li a {
  display: block;
  position: relative;
}
.info__box .info__link li a:hover {
  opacity: 0.8;
}
.info__box .info__link li a:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  width: 12px;
  height: 16px;
  background: #3b2a89;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.info__box .info__box__row {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 62px;
}
.info__box .form-row--select select{
  color: #333;
}
.info__box .info__box__row dl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 22px 0 23px 19px;
  border-bottom: 1px solid #d9d9d9;
}
.info__box .info__box__row dl dt {
  min-width: 262px;
}
.info__box .info__box__row dl dd {
  letter-spacing: 0.05em;
  width: calc(100% - 262px);
}
.info__box--profile {
  max-width: 900px;
  padding-top: 55px;
  padding-bottom: 16px;
}
.info__box--profile .info__title {
  padding-bottom: 16px;
}
.info__box--profile .button {
  margin: 0 auto;
  display: block;
}
.info__box--profile .info__box__download {
  color: #3b2a89;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  line-height: 27px;
  letter-spacing: 0.04em;
  margin: 29px auto 0;
}
.info__box--profile .info__box__download a {
  display: inline-block;
  position: relative;
  margin-left: -16px;
  width: 100%;
  text-decoration: underline;
}
.info__box--profile .info__box__download a:hover {
  text-decoration: none;
}
.info__box--profile .info__box__download a:before {
  content: '';
  display: inline-block;
  background: url(../img/info/download_icon.svg) no-repeat center top;
  width: 19px;
  height: 17px;
  background-size: contain;
  margin: -6px 19px 2px 0px;
}
.info__box--edit {
  max-width: 900px;
  margin-top: -15px;
  padding: 53px 50px;
}
.info__box--edit textarea {
  height: 138px;
  width: 79%;
  margin-bottom: -7px;
  font-weight: 700;
}
.info__box--edit textarea::placeholder{
  color: rgb(51 51 51 / 30%);
}
.info__box--edit .radiomark {
  display: block;
}
.info__box--edit select,
.info__box--edit input[type='text'],
.info__box--edit input[type='tel'],
.info__box--edit input[type='number'],
.info__box--edit input[type='password'],
.info__box--edit input[type='email'] {
  border-radius: 0px;
  border-color: #d9d9d9;
  padding: 6px 0 6px 10px;
  height: auto;
  width: 77%;
  font-weight: 700;
}
.info__box__row .form-value--small select{
  color: rgb(51 51 51 / 50%);
} 
.text-gray-50 input::placeholder{
  color: rgb(51 51 51 / 50%) !important;
}
select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(../img/shared/icon_select.svg) no-repeat right 7px center #fff;
}
.info__box--edit input::placeholder{
  color: rgb(51 51 51 / 30%);
}
.info__box--edit select {
  display: inline-block;
  padding: 9px 0px 8px 5px;
  margin-right: 11px;
}
.info__box--edit .info__box__row dl {
  padding: 31px 0 25px 18px;
}
.info__box--edit .info__box__row dl dt {
  min-width: 252px;
  position: relative;
  width: 252px;
  line-height: 22px;
}
.info__box--edit .info__box__row dl dt.form-caption--small {
  box-sizing: border-box;
  padding-right: 100px;
}
.info__box--edit .info__box__row dl dt small {
  font-size: 11px;
  line-height: 17px;
  width: 159px;
  display: inline-block;
  margin-top: 5px;
}
.info__box--edit .info__box__row dl dt span {
  background: #dd0db4;
  color: #fff;
  position: absolute;
  right: 43px;
  width: 48px;
  height: 24px;
  text-align: center;
  top: 1px;
  line-height: 25px;
  font-size: 14px;
  font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.info__box--edit .info__box__row dl dd {
  width: calc(100% - 252px);
  margin-top: -9px;
  position: relative;
}
.info__box--edit .info__box__row dl dd .error {
  font-size: 12px;
  font-weight: 500;
  color: #f70e4d;
  letter-spacing: 0;
  display: block;
  margin: -4px 0;
}
.info__box--edit .info__box__row dl dd .note {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: -20px;
  display: block;
  margin-top: 2px;
}
.info__box--edit .info__box__row dl dd.f14 {
  margin-top: -15px;
  margin-bottom: -3px;
}
.info__box--edit .info__box__row dl dd.form-value--small input,
.info__box--edit .info__box__row dl dd.form-value--small select {
  width: 180px;
}
.info__box--edit .info__box__row dl dd.form-value--small2 select {
  width: 187px;
}
.info__box--edit .info__box__row dl dd .button {
  width: 243px;
  border-radius: 8px;
  height: 44px;
  line-height: 15px;
  letter-spacing: 1px;
}
.info__box--edit .info__box__row dl dd .button:before {
  display: none;
}
.info__box--edit .info__box__row dl dd.form-flex {
  margin-top: -5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 33px;
}
.info__box--edit .info__box__row dl dd.form-flex .form-flex__content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.info__box--edit .info__box__row dl dd.form-flex .checkbox {
  width: 50%;
  display: block;
  position: relative;
}
.info__box--edit .info__box__row dl dd.form-flex .checkbox.checkbox--w100 {
  width: 100%;
}

.info__box--edit .info__box__row dl dd.form-flex .checkbox span {
  display: inline-block;
  margin-right: 20px;
}
.info__box--edit .info__box__row dl.form-row--type {
  padding-bottom: 8px;
}
.info__box--edit .info__box__row dl.form-row--type dt {
  margin-top: 28px;
}
.info__box--edit .info__box__row dl.form-row--type dd select {
  width: 165px;
  margin-bottom: 15px;
}
.info__box--edit .info__box__row dl.form-row--select dd select {
  width: 110px;
}
.info__box--edit .info__box__row dl.form-row--select2 dd select {
  width: 410px;
}
.info__box--edit .info__box__row:nth-child(2) dl.form-row--select {
  padding-bottom: 21px;
}
.info__box--edit .info__box__row.checkbox--row .info__title {
  padding-bottom: 14px;
}
.info__box--edit .info__box__row.checkbox--row dl {
  padding: 24px 0 16px 20px;
}
.info__box--edit .btn-submit {
  margin: 0 auto;
  display: block;
  margin-top: -27px;
}
.info__box--confirm {
  padding-bottom: 60px;
}
.info__box--confirm .confirm--title {
  margin-bottom: 13px;
}

.info__text {
  text-align: center;
}

@media screen and (max-width: 560px) {
  #key {
    margin-bottom: 12.86vw;
  }
  #key.key--info1 {
    margin-bottom: 14.29vw;
  }
  #key.key--info3 {
    margin-bottom: 13.57vw;
  }
  #key.key--info4 {
    margin-bottom: 12.86vw;
  }
  #key.key--info5 {
    margin-bottom: 15.54vw;
  }
  .wrap {
    padding: 0 7.14vw;
  }
  .info__box {
    padding-top: 10.18vw;
    padding-right: 7.14vw;
    padding-left: 7.14vw;
  }
  .info__box .info__title {
    font-size: 4.29vw;
    padding-bottom: 3.57vw;
  }
  .info__box .info__link {
    font-size: 3.57vw;
  }
  .info__box .info__link li {
    padding: 4.11vw 0 4.11vw 3.75vw;
  }
  .info__box .info__box__row {
    font-size: 3.57vw;
    line-height: 3.93vw;
    margin-bottom: 11.79vw;
  }
  .info__box .info__box__row dl {
    flex-direction: column;
    padding: 5.36vw 0 5.71vw 0vw;
    gap: 4.11vw;
  }
  .info__box .info__box__row dl dt {
    min-width: 0;
    width: 100%;
    line-height: 5.36vw;
  }
  .info__box .info__box__row dl dt span {
    right: 0;
    width: 10.18vw;
    height: 5vw;
    top: -0.54vw;
    line-height: 5.36vw;
    font-size: 3.21vw;
  }
  .info__box .info__box__row dl dd {
    width: 100%;
  }
  .info__box--profile {
    padding-top: 8.39vw;
    padding-bottom: 1.79vw;
  }
  .info__box--edit {
    padding-bottom: 7.14vw;
  }
  .info__box--edit select,
  .info__box--edit input[type='text'],
  .info__box--edit input[type='tel'],
  .info__box--edit input[type='number'],
  .info__box--edit input[type='password'],
  .info__box--edit input[type='email'] {
    width: 100%;
    padding: 2.68vw 0 2.68vw 3.21vw;
    border-radius: 0.89vw;
  }
  .info__box--edit textarea {
    width: 100%;
    height: 32.14vw;
    margin-bottom: -0.36vw;
  }
  .info__box--edit .info__box__row dl {
    padding-bottom: 5vw;
  }
  .info__box--edit .info__box__row dl dt.form-caption--small {
    padding-right: 0;
  }
  .info__box--edit .info__box__row dl dt small {
    font-size: 2.68vw;
    width: 100%;
    line-height: 4.11vw;
    margin-top: 1.25vw;
    margin-bottom: -0.54vw;
  }
  .info__box--edit .info__box__row dl dd .error {
    font-size: 3.21vw;
    margin: 0.71vw 0;
  }
  .info__box--edit .info__box__row dl dd.form-value--small input,
  .info__box--edit .info__box__row dl dd.form-value--small select {
    width: 100%;
    margin-bottom: -0.36vw;
  }
  .info__box--edit .info__box__row dl dd.form-value--small2 select {
    width: 100%;
    margin-bottom: 0;
  }
  .info__box--edit .info__box__row dl dd .button {
    width: 100%;
    height: 12.5vw;
    letter-spacing: 0vw;
  }
  .info__box--edit .info__box__row dl dd .note {
    font-size: 2.86vw;
    margin-right: 0;
    margin-bottom: 2.86vw;
  }
  .info__box--edit .info__box__row dl dd .note span {
    display: block;
    margin-left: 2.68vw;
  }
  .info__box--edit .info__box__row dl dd.form-flex {
    flex-direction: column;
    font-size: 3.21vw;
    line-height: 6.96vw;
  }
  .info__box--edit .info__box__row dl dd.form-flex .form-flex__content {
    width: 100%;
  }
  .info__box--edit .info__box__row dl dd.form-flex .checkbox {
    width: 100%;
  }
  .info__box--edit .info__box__row dl dd.form-flex .checkbox span {
    margin-right: 0;
  }
  .info__box--edit .info__box__row dl.form-row--select {
    padding-bottom: 5vw;
  }
  .info__box--edit .info__box__row dl.form-row--select dd {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .info__box--edit .info__box__row dl.form-row--select dd select {
    margin-right: 0;
    width: calc(33% - 1.96vw);
  }
  .info__box--edit .info__box__row dl.form-row--select2 dd select {
    margin-right: 0;
    width: 100%;
  }
  .info__box--edit .info__box__row dl.form-row--type {
    padding-bottom: 3.21vw;
  }
  .info__box--edit .info__box__row dl.form-row--type dt {
    margin-top: 0.36vw;
  }
  .info__box--edit .info__box__row dl.form-row--type dd select {
    margin-bottom: 1.96vw;
  }
  .info__box--edit .info__box__row.checkbox--row .info__title {
    padding-bottom: 3.75vw;
  }
  .info__box--edit .info__box__row.checkbox--row dl {
    padding: 5.36vw 0 3.75vw 0vw;
  }
  .info__box--edit .info__box__row.checkbox--row .form-row--big {
    padding-bottom: 2.86vw;
    gap: 4.82vw;
  }
  .info__box--edit .info__box__row.checkbox--row .form-row--big dd {
    line-height: 4.82vw;
  }
  .info__box--edit .info__box__row.checkbox--row .form-row--big dd .checkbox {
    margin-bottom: 2.14vw;
  }
  .info__box--confirm {
    padding: 8.93vw 0;
  }
  .info__box--confirm .confirm--title {
    margin-bottom: 7.68vw;
    margin-top: -5.36vw;
  }
  .info__text {
    width: 69.64vw;
    margin: -6.61vw auto 0;
    max-width: 100%;
  }
  select{
    background: url(../img/shared/icon_select_sp.svg) no-repeat right 3.21vw center / 3.39vw auto #fff;
  }
}