@charset "UTF-8";

#page-404 .c-heading--error {
  color: var(--color-black);
}

.p-error-message {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
}

.p-error-message__text {
  flex: 0 0 calc((100% - 40px) * (980 / 1240));
  max-width: calc((100% - 40px) * (980 / 1240));
}

.p-error-message__image {
  flex: 0 0 calc((100% - 40px) * (260 / 1240));
  max-width: calc((100% - 40px) * (260 / 1240));
}

.p-error-search {
  border-radius: 20px;
  text-align: center;
  padding: 40px;
  background-color: var(--color-green-3);
}

.p-error-search-inner {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.p-error-search__text {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: var(--ls-p4);
  color: var(--color-black);
}

.p-error-search__box {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  box-sizing: border-box;
  padding: 14px 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.p-error-search__box > input {
  border: none;
  outline: none;
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: 20px;
  letter-spacing: var(--ls-n1);
  color: var(--color-text-dark);
  width: calc(640 / 1280 * 100vw);
  max-width: 640px;
  height: 20px;
  padding: 0;
}

.p-error-search__box > button {
  border: none;
  cursor: pointer;
  background-color: var(--color-white);
  width: 20px;
  height: 20px;
  padding: 0;
  background-image: var(--icon-search);
  background-position: center;
  background-size: contain;
}

.p-error-search__box >  button:focus-visible {
background-color: #e6f0ff;
}

/* ------------------------------
  2. ブレークポイント (SP)
  767px以下はスマホ
------------------------------ */
@media screen and (max-width: 767px) {
  .p-error-message {
    flex-flow: column;
    gap: 16px;
  }
  .p-error-message__text {
    order: 2;
    flex: 0 0 100%;
    max-width: unset;
  }
  .p-error-message__image {
    order: 1;
    flex: 0 0 100%;
    max-width: unset;
  }
  .p-error-message__image > img {
    width: 60%;
    margin: 0 auto;
  }
  .p-error-search {
    padding: 24px 20px;
  }
  .p-error-search-inner {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 16px 0;
  }
  .p-error-search__text {
    font-size: var(--fs-18);
  }
  .p-error-search__box {
    border-radius: 38px;
    padding: 13px;
  }
  .p-error-search__box > input {
    font-size: var(--fs-14);
    min-width: unset;
    width: calc(248 / 375 * 100vw);
  }
  .p-error-search__box > button {
    width: 18px;
    height: 17px;
  }
}