@charset "UTF-8";
[data-view=preparing] .when-preparing {
  display: block;
}
[data-view=preparing] .when-entry {
  display: none;
}
[data-view=preparing] .when-confirm {
  display: none;
}
[data-view=preparing] .when-thanks {
  display: none;
}
[data-view=preparing] .when-error {
  display: none;
}

[data-view=entry] .when-preparing {
  display: none;
}
[data-view=entry] .when-entry {
  display: block;
}
[data-view=entry] .when-confirm {
  display: none;
}
[data-view=entry] .when-thanks {
  display: none;
}
[data-view=entry] .when-error {
  display: none;
}

[data-view=confirm] .when-preparing {
  display: none;
}
[data-view=confirm] .when-entry {
  display: none;
}
[data-view=confirm] .when-confirm {
  display: block;
}
[data-view=confirm] .when-thanks {
  display: none;
}
[data-view=confirm] .when-error {
  display: none;
}

[data-view=thanks] .when-preparing {
  display: none;
}
[data-view=thanks] .when-entry {
  display: none;
}
[data-view=thanks] .when-confirm {
  display: none;
}
[data-view=thanks] .when-thanks {
  display: block;
}
[data-view=thanks] .when-error {
  display: none;
}

[data-view=error] .when-preparing {
  display: none;
}
[data-view=error] .when-entry {
  display: none;
}
[data-view=error] .when-confirm {
  display: none;
}
[data-view=error] .when-thanks {
  display: none;
}
[data-view=error] .when-error {
  display: block;
}

.input-txtarea01 {
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: 14px;
  color: #3e3b50;
  text-align: center;
  padding: 10px 15px;
  background-color: #ffeced;
  border-radius: 25px;
  box-sizing: border-box;
}

.input-txtarea02 {
  font-size: 14px;
  text-align: center;
  margin-top: 30px;
}
.input-txtarea02 .red-icon {
  font-size: 11px;
  color: #d02d32;
  vertical-align: top;
}
.input-txtarea02 .red-txt {
  color: #d02d32;
}

dl.info-form {
  margin: 50px 0;
}
@media screen and (max-width: 768px) {
  dl.info-form {
    margin: 50px 0 25px 0;
  }
}
dl.info-form > dt {
  padding: 0;
  font-size: 16px;
}
dl.info-form > dt > span {
  font-size: 11px;
  color: #d02d32;
  vertical-align: top;
}
dl.info-form > dd {
  padding: 5px 0;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  dl.info-form > dd {
    margin-bottom: 15px;
  }
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  border: none;
  outline: none;
}
@media screen and (max-width: 768px) {
  input[type=text],
input[type=email],
input[type=tel],
textarea {
    font-size: 16px;
  }
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus {
  outline: 1px solid #818181;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* デフォルトの黄色い背景を、内側の影（box-shadow）を使って上書きし、フォームの背景色に戻します。*/
  -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;
  /* オートフィル時に文字色が勝手に変わるのを防ぐため、明示的に色を指定します。*/
  -webkit-text-fill-color: #333333 !important;
  /* 背景色の変化にトランジションが適用されるのを防ぎます（任意）。*/
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

input::placeholder,
textarea::placeholder {
  color: #818181;
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  input::placeholder,
textarea::placeholder {
    font-size: 16px;
  }
}

input[type=text].is-invalid,
input[type=email].is-invalid,
input[type=tel].is-invalid,
textarea.is-invalid {
  border: 1px solid #dc3545;
}

.agree_check {
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: 16px;
}

.praivacy-link {
  width: -webkit-fit-content;
  width: fit-content;
  margin: 5px auto 30px auto;
  font-size: 14px;
}
.praivacy-link > a {
  color: #333333;
  text-decoration: underline;
}

.confirm-btn {
  width: 300px;
  margin: 0 auto 40px auto;
}
.confirm-btn > button {
  width: 100%;
  padding: 18px 0;
  border: 1px solid #d02d32;
  color: white;
  border-radius: 60px;
  text-align: center;
  background-color: #d02d32;
  box-sizing: border-box;
  cursor: pointer;
}
.confirm-btn > button[disabled] {
  border: 1px solid #818181;
  color: #818181;
  background-color: white;
  cursor: auto;
}

.invoice-info {
  width: 100%;
  margin: 0 auto;
}
.invoice-info > div {
  border: 1px solid #999999;
  padding: 20px 10px;
  text-align: center;
  color: #333333;
  font-size: 14px;
  box-sizing: border-box;
}

.error-mes {
  border: 1px solid red;
  padding: 5px;
  color: red;
  margin: 20px 0;
}

.is-invalid ~ .error-txt {
  padding: 5px;
  color: red;
}

.check-txt {
  font-size: 16px;
  margin-bottom: 30px;
}

.check-btn-area {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.check-btn-area .cancel-btn {
  width: 300px;
}
.check-btn-area .cancel-btn > button {
  width: 100%;
  padding: 18px 0;
  border: 1px solid #818181;
  color: #818181;
  border-radius: 60px;
  text-align: center;
  background-color: white;
  box-sizing: border-box;
  cursor: pointer;
}
.check-btn-area .submit-btn {
  width: 300px;
}
.check-btn-area .submit-btn > button {
  width: 100%;
  padding: 18px 0;
  border: 1px solid #d02d32;
  color: white;
  border-radius: 60px;
  text-align: center;
  background-color: #d02d32;
  box-sizing: border-box;
  cursor: pointer;
}
.check-btn-area .submit-btn > button:hover {
  background: rgba(208, 45, 50, 0.8);
}

.when-confirm .confirm-text {
  white-space: pre-wrap;
  word-break: break-all;
}

.thanks-txt {
  font-size: 16px;
  padding: 40px;
  border: 1px solid #818181;
}
@media screen and (max-width: 768px) {
  .thanks-txt {
    padding: 40px 20px;
  }
}

.error-page {
  font-size: 16px;
  padding: 40px;
  border: 1px solid red;
}
@media screen and (max-width: 768px) {
  .error-page {
    padding: 40px 20px;
  }
}
.error-page .error-title {
  font-size: 24px;
  text-align: center;
  padding-bottom: 20px;
}
.error-page .error-page-txt {
  margin-bottom: 60px;
}
.error-page .error-link {
  text-align: center;
  margin-bottom: 30px;
  cursor: pointer;
  text-decoration: underline;
}

.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 背景を少し暗くする */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner-container > .spinner {
  max-width: 25%;
  max-height: 25%;
}