main.container:has(.question_new) {
  max-width: 744px;

  + .nav {
    max-width: 744px;
    width: 100%;
    margin-inline: auto;
  }
}

.new_top {
  position: relative;
  height: 50vw;
  overflow: hidden;
  margin-bottom: 2rem;
  z-index: 1;
  background: url(/assets/texture/gold.webp) repeat center / 5rem 5rem;
  border-bottom: 2px solid var(--black);
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(/assets/texture/seigaiha.webp) repeat center / 5rem 5rem;
    mask-image: linear-gradient(to right, white 0, transparent 100%);
    mix-blend-mode: color-dodge;
  }

  img {
    width: calc(100% / 3);
    position: absolute;
    left: -1rem;
    bottom: -2rem;
    z-index: 1;
    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgb(0 0 0 / 0.4));
  }

  h1 {
    margin: 0;
    position: absolute;
    top: calc(50% + 4vw);
    right: 0;
    translate: 0 -50%;
    z-index: 1;
    background: url(/assets/icon/maki-r.webp) no-repeat center right / contain;
    padding: 0.5rem 4rem 0.5rem 1rem;
    filter: drop-shadow(0.1rem 0.2rem 0.2rem rgb(0 0 0 / 0.4));
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      translate: 0 -50%;
    }
    &::before {
      background: url(/assets/icon/maki-l.webp) no-repeat center / contain;
      left: -1rem;
      width: 1.5rem;
      height: 125%;
      filter: drop-shadow(0.1rem 0 0.2rem rgb(0 0 0 / 0.4));
    }
    &::after {
      background: url(/assets/icon/maki-c.webp) no-repeat left center / 100%
        100%;
      left: 0;
      width: 85%;
      height: 100%;
      z-index: -1;
    }
  }
}

.new_form {
  padding-inline: 1rem;

  fieldset {
    &:not(:first-of-type) {
      margin-top: 2rem;
    }
    &:last-of-type {
      margin-top: 4rem;
    }
  }

  label {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.25rem;

    span {
      margin-inline: auto 0.25rem;
    }
  }

  textArea {
    min-height: 12rem;
  }
}

.new_submit {
  p {
    display: table;
    margin: 0 auto 1rem;
    font-size: 0.875rem;
    color: var(--red);
  }
}

@media (min-width: 744px) {
  .new_top {
    height: 17rem;

    h1 {
      top: calc(50% + 1.5rem);
    }

    img {
      width: 25%;
      left: 0;
      bottom: -1rem;
    }
  }

  .new_form {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .new_top {
    height: 12rem;

    img {
      width: 9rem;
    }
  }
}

@media (min-width: 1280px) {
  main.container:has(.question_new) + nav.nav {
    left: calc(50% - 28.05rem);
  }
}