@charset "UTF-8";
/* ==========================================
 Layout
============================================*/
/* ==========================================
 Contents
============================================*/
.index {
  color: #2a2a2a;
  font-size: var(--sz-32);
  font-weight: 400;
  line-height: 1.5;
  padding-block: var(--sz-38) var(--sz-35);
}

.index__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: 1.53;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sz-30);
}
.index__heading::after {
  content: "";
  display: block;
  width: var(--sz-454);
  height: 1px;
  background-color: var(--color-primary);
}

form > .row {
  padding-inline: var(--sz-35);
  margin-bottom: var(--sz-30);
}

.row-address > * + *,
.row-email > * + *,
.row-password > * + * {
  margin-top: var(--sz-13);
}

.form-label {
  font-weight: bold;
  margin-bottom: 0;
}

.form-label ~ .ec-required {
  color: var(--color-pink);
  margin-left: 1em;
  vertical-align: unset;
  font-size: inherit;
  display: inline-block;
  font-weight: bold;
}

.form-control,
.form-select {
  font-size: inherit;
  border-radius: 0;
  border-color: var(--color-primary);
}
.form-control::-moz-placeholder, .form-select::-moz-placeholder {
  color: #b8bec4;
}
.form-control::placeholder,
.form-select::placeholder {
  color: #b8bec4;
}

.form-radio-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}

.ec-errorMessage {
  margin-bottom: 0;
  color: var(--bs-danger);
}

.icon-question {
  background: var(--color-default);
  width: var(--sz-30);
  padding: var(--sz-4);
  border-radius: 100vh;
}

div:has(> * > .icon-question) {
  display: flex;
  align-items: center;
}

/* 同意チェック */
form > .row--agreement {
  padding-inline: 0;
  font-size: var(--sz-32);
  font-weight: bold;
}

.row--agreement .form-check {
  padding-left: 1.8em;
}

.row--agreement .form-check-input {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0;
  border: var(--sz-6) solid var(--color-black);
  opacity: 0.6;
  margin-top: 0;
  margin-left: -1.8em;
}

/* ボタン */
.index__actions {
  margin-top: var(--sz-21);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sz-14);
}

.btn-register {
  aspect-ratio: 656/92;
  padding: 0;
  --bs-btn-disabled-color: var(--color-white);
}

.btn-back {
  aspect-ratio: 656/76;
  padding: 0;
}

/* 注釈 */
.index__note {
  color: var(--color-wine);
  font-size: var(--sz-26);
  line-height: 1.53;
  text-align: center;
  margin-bottom: var(--sz-32);
}

@media screen and (min-width: 992px) {
  .index {
    font-size: var(--sz-20);
    padding-block: var(--sz-38) 0;
  }
  .index__heading {
    font-size: var(--sz-50);
    margin-bottom: var(--sz-50);
  }
  .index__body {
    max-width: var(--sz-467);
    margin-inline: auto;
  }
  form > .row {
    margin-bottom: var(--sz-20);
    padding-inline: 0;
  }
  /* 同意チェック */
  form > .row--agreement {
    font-size: var(--sz-20);
  }
  .row--agreement .form-check-input {
    border-width: var(--sz-3);
  }
  /* ボタン */
  .index__actions {
    margin-top: var(--sz-21);
  }
  .btn-register {
    font-size: var(--sz-36);
    aspect-ratio: 389/92;
    width: var(--sz-389);
  }
  .btn-back {
    font-size: var(--sz-36);
    aspect-ratio: 389/76;
    width: var(--sz-389);
  }
  /* 注釈 */
  .index__note {
    font-size: var(--sz-16);
    margin-bottom: var(--sz-20);
  }
}
/* ==========================================
 Modal
============================================*/
/* 同意内容モーダル */
.modal-agreement .modal-dialog {
  width: var(--sz-590);
  margin-inline: auto;
}
.modal-agreement .modal-content {
  margin-inline: auto;
  border-radius: 0;
  height: var(--sz-800);
  overflow-y: scroll;
}
.modal-agreement .modal-header {
  padding: var(--sz-15);
  border-bottom: none;
}
.modal-agreement .modal-header .btn-close {
  position: static;
  aspect-ratio: 1;
  height: var(--sz-25);
  background: transparent var(--bs-btn-close-bg) center/cover no-repeat;
  margin-left: auto;
}
.modal-agreement .modal-body {
  padding: 0 var(--sz-40) var(--sz-80);
}

@media screen and (min-width: 992px) {
  .modal-agreement .modal-dialog {
    width: var(--sz-600);
  }
  .modal-agreement .modal-body {
    padding: 0 var(--sz-50) var(--sz-50);
  }
}
/* ==========================================
 Agreement
============================================*/
/* 利用規約 */
.agreement__heading {
  text-align: center;
  font-size: var(--sz-30);
  line-height: 1.4;
  margin-bottom: var(--sz-25);
}

.agreement__body {
  font-size: var(--sz-20);
  line-height: 1.4;
}