.questions_index {
  padding-bottom: 0;
}

.questions_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: 0rem;
    bottom: -0.5rem;
    z-index: 1;
    rotate: 350deg;
    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: 90%;
      height: 100%;
      z-index: -1;
    }
  }
}

.questions_list {
  form {
    position: relative;
    margin-bottom: 2rem;
    padding-inline: 1rem;

    .input_text {
      border-radius: 50vh;
      padding: 0.75rem 3.5rem 0.75rem 1rem;
    }

    button {
      display: grid;
      place-content: center;
      background: conic-gradient(
        from -90deg at -5% center,
        #f9cc45,
        rgb(255, 132, 91),
        var(--red),
        #ff9054
      );
      color: var(--white);
      font-weight: bold;
      white-space: nowrap;
      border-radius: 50%;
      line-height: 1;
      width: 3rem;
      height: 3rem;
      outline: 1px solid var(--white);
      outline-offset: -3px;
      position: absolute;
      top: 50%;
      right: 1rem;
      translate: 0 -50%;
    }

    + p {
      padding-inline: 1rem;
    }
  }

  .questions {
    a {
      padding-inline: 1rem;
    }
  }
}

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

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

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

  .questions_list {
    padding-inline: 2rem;

    form {
      padding-inline: 0;

      + p {
        padding: 0;
      }
    }

    form button {
      right: 0;
    }

    .questions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 1rem;

      a {
        height: 100%;
        padding: 1rem 0;
      }
    }
  }
}

@media (min-width: 1024px) {
  .questions_index {
    position: relative;
  }

  .questions_top {
    width: calc((200% / 3) - 2rem);
    height: 12rem;
  }

  .questions_list {
    &::before {
      content: "";
      background: #eee;
      width: calc((100% / 3) + 2rem);
      height: 12rem;
      position: absolute;
      top: 0;
      right: 0;
      border-bottom: 2px solid var(--black);
      border-left: 1px solid var(--black);
    }

    form {
      width: calc((100% / 3) - 2rem);
      position: absolute;
      top: 7rem;
      right: 2rem;
      margin: 0;
      z-index: 1;

      &::before {
        content: "たとえ依頼検索";
        position: absolute;
        left: 0.5rem;
        top: -2rem;
      }
    }

    .questions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

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

  .questions_list .questions {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    a {
      padding-block: 1.5rem;
    }
  }
}

@media (min-width: 1440px) {
  main.container:has(.questions_index) {
    max-width: 1280px;

    + nav.nav {
      left: calc(50% - 45.9rem);
    }
  }

  .questions_top img {
    width: 12rem;
  }

  .questions_list .questions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}