/* ------------------------------
SEARCH PAGE（分類番号検索システム）
------------------------------ */

.search {
  & label {
    line-height: 1.875;
  }

  & input {
    line-height: 1.875;
  } 

  & .search__box {
    padding: 30px;
    background: var(--blue03);
    margin-top: 80px;

    & .form__box {
      & label {
        display: block;
        margin-bottom: 16px;
      }

      & select {
        min-width: 430px;
        background: var(--white01);
        border: none;
        display: flex;
        height: 43px;
        padding: 0.5em 1em;
      }

      &+.form__box {
        margin-top: 30px;
      }

      & .input__box {
        & input {
          flex-basis: calc(100% - 140px);
          display: flex;
          flex-wrap: wrap;
          padding: 0.5em 1em;
          font-size: var(--px16);
          height: 43px;
          border: none;
        }

        & button {
          flex-basis: 130px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          background: var(--blue01);
          color: var(--white01);
          height: 43px;
        }

      }

    }

  }

  & .intro__box {
    & .text__box {
      flex-basis: calc(100% - 380px);
    }

    & .guide__pdf {
      flex-basis: 360px;
      padding: 24px;
      border: var(--black01) solid 1px;
      align-self: flex-start;

      & p {
        font-feature-settings: "palt";
      }
    }
  }

  & .box {}
}
.page__search {
  & .cf {
    width: 100%;
    padding-bottom: 60px;
    & h1 {
      max-width: 1000px; width: calc(100% - 40px);  margin-left: auto; margin-right: auto; 
    }
  }
  & .caution00 {
    max-width: 1000px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; 
  }
  & .survey-area {
    & ul {
      max-width: 1000px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; 
    }
  }
  
  & #searchArea {
    max-width: 1000px; width: calc(100% - 40px);  margin-left: auto; margin-right: auto; 
    & a {
      color: var(--blue01);
    }
  }
  & #txt-box {
    & ul {
      margin-left: 1em;
    }
  }
  & #result {
    & h4 {
      color: var(--blue01);
    }
  }
}
.search__system__content {
  margin: 120px auto 0 auto;
}
.common__content {
  & .step00 {
    /* background: linear-gradient(180deg, var(--white01) 0%, var(--white01) 50%, var(--blue03) 50%, var(--blue03) 100%); */
    /* background: none; */
  }
  & .step01 {
    max-width: 640px;
  }
  & .select-area {
    /* background: var(--blue03); */
  }
  & label {
    line-height: 1.875; cursor: pointer;
  }
  & input {
    line-height: 1.875;
  }
  & img {
    display: inline-block;
  }
  & .step01 {
    background: var(--blue01);
  }
  & .step01_1 {
    color: var(--blue01);
  }
  & .select-area {
    & a {
      color: var(--blue01);
    }
  }
  & .caution01 {
    background: var(--blue01);
  }
  & .caution02 {
    color: var(--blue01);
  }
}

@media screen and (max-width:810px) {
  .page__search {
    & #searchText {
      max-width: 100%;
    }
    & .search-button {
      margin-left: 0; margin-top: 20px; margin-right: 20px; width: calc( ( 100% - 20px ) / 2);
    }
    & .rtn-button {
      margin-left: 0; margin-top: 20px; margin-right: 0; width: calc( ( 100% - 20px ) / 2);
    }
    .common__content {
      padding: 50px 20px;
      & .step01 {
        max-width: none; width: 100%; padding: 1em  1.5em 2em;
      }
      & .select-survey-no {
        max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 2em; padding-right: 2em; 
      }
    }
    & .survey-area {
      & ul {
        width:100%;
      }
    }
    & .caution00 {
      width: 100%;
    }
    & .select-area {
      padding-left: 0; padding-right: 0;
    }
    & .select-envelope {
      padding-left: 0; padding-right: 0;
      & label {
        align-self: stretch;
      }
    }
  }
  
  .search {
    & .intro__box {
      & .text__box {
        flex-basis: 100%;
      }

      & .guide__pdf {
        flex-basis: 100%;
        margin-top: 20px;
      }
    }


    & .search__box {
      padding: 20px;

      

      & .form__box {
        & select {
          max-width: 100%;
          min-width: inherit;
        }

        & .input__box {
          justify-content: center;
          gap: 10px 0;

          & input {
            flex-basis: 100%;
          }
        }
      }
    }
  }
}