@charset "UTF-8";
/* ==========================================================================
   search.css
   医薬品検索（/search/）専用
   ========================================================================== */

/* --------------------------------------------------------------------------
   検索（枠囲み）
   -------------------------------------------------------------------------- */
.p-search__box {
  padding: 50px 30px 60px;
  border: 2px solid var(--gray-line);
  text-align: center;
}

.p-search__lead {
  color: var(--green);
  font-size: var(--fz-h3);
  font-weight: 700;
  letter-spacing: var(--ls-mid);
}

/* 検索フォーム（.search 内のマークアップは変更しない）
   見た目は商品検索結果（list.css の .p-list__search-form）に合わせる */
.p-search .search {
  position: relative;
  width: calc(100% - 40px);
  max-width: 680px;
  margin: 20px auto 0;
  translate: -20px 0; /* 外側の検索アイコン分を差し引いて中央に */
}

.p-search .search input {
  width: 100%;
  height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: 25px;
  background: #ececec;
  font-size: 15px;
}

.p-search .search input::placeholder {
  color: var(--ink-sub);
}

.p-search .search button {
  position: absolute;
  top: 50%;
  right: -40px;
  translate: 0 -50%;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--ink-sub);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.p-search .search button:hover {
  opacity: .7;
}

/* 検索アイコン（.c-icon--search と同じ表示） */
.p-search .search i.search01 {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url(/assets/images/common/icon_search.svg) center / contain no-repeat;
          mask: url(/assets/images/common/icon_search.svg) center / contain no-repeat;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   注意事項・リンク・お問い合わせ
   -------------------------------------------------------------------------- */
.p-search__note {
  margin-top: 60px;
}

.p-search__link {
  margin-top: 30px;
  text-align: right;
}

.p-search__form {
  margin-top: var(--section-space);
}

@media (max-width: 767px) {
  .p-search__box {
    padding: 30px 15px 36px;
  }

  .p-search__lead {
    font-size: 18px;
  }

  .p-search .search {
    width: calc(100% - 32px);
    margin-top: 14px;
    translate: -16px 0;
  }

  .p-search .search input {
    height: 44px;
    padding: 0 20px;
  }

  .p-search .search button {
    right: -34px;
    font-size: 22px;
  }

  .p-search__note {
    margin-top: 40px;
  }

  .p-search__link {
    margin-top: 24px;
  }
}