@charset "UTF-8";
/* ==============================================
 * SEARCH
 *
 * memo:
 * 一覧系ページ
 *
 * ============================================== */
.custom-select {
  height: auto;
  padding: 10px 28px 10px;
}

/* ----------------------------------------------------------------------------------

 検索結果 上部コンテナ

 ---------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------

 検索結果 一覧

 ---------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------

 カテゴリー選択

 ---------------------------------------------------------------------------------- */

.refinement-bar {
  display: block !important;
  position: relative !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: 1080px;
  margin: 25px 30px 40px;
  padding: 0;
  overflow: visible;
  border: 3px solid #fff;
  border-radius: 3px;
  background-color: #F4F3ED !important;
  box-shadow: none;
}
.refinement-bar .card.refinement {
  flex-direction: row;
  margin: 0;
  padding: 20px 30px 50px 30px;
  border: 0 none;
  background-color: transparent;
}
.refinement-bar .card-header {
  position: relative;
  padding: 6px 10px 8px 30px;
  border: 0 none;
  background-color: transparent;
  font-family: "TazuganeInfoStdN-Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", "Osaka", "Osaka\FF0D\7B49\5E45", "Osaka-Mono", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.refinement-bar .card-header > h2 {
  position: relative;
  top: -2px;
  line-height: 1.3;
}
.refinement-bar .card-header:before {
  appearance: none;
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("../images/global/icon_search.svg") no-repeat center;
  background-size: contain;
  content: "";
}
.refinement-bar .card-body {
  width: calc(100% - 170px);
  padding: 0 20px;
}
.refinement-bar .card-body .values {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -40px 0 0;
  padding: 0;
}
.refinement-bar .card-body .values li {
  margin-right: 10px;
  margin-bottom: 12px;
}
.refinement-bar .card-body .values button {
  padding: 4px 18px;
  border-radius: 3px;
  outline: none;
  background-color: #fff;
  color: #000;
  font-size: 17px;
  transition: 0.3s;
}
.refinement-bar .card-body .values button.active {
  background-color: #c90012;
  color: #fff;
  font-weight: bold;
}
.refinement-bar .card-footer {
  padding: 0;
  border: 0 none;
  background-color: transparent;
}
.refinement-bar .sx-category-link a {
  display: block;
  position: relative;
  padding: 10px 20px;
  background-color: #777;
  color: #fff !important;
  font-family: "TazuganeInfoStdN-Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", "Osaka", "Osaka\FF0D\7B49\5E45", "Osaka-Mono", sans-serif;
  font-size: 17px;
  font-weight: bold;
  white-space: nowrap;
  transition: 0.3s;
}
.refinement-bar .sx-category-link a:before {
  appearance: none;
  display: inline-block;
  position: relative;
  top: -2px;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  padding: 0;
  border: 0;
  background: url("../images/global/icon_search_white.svg") no-repeat center;
  background-size: contain;
  vertical-align: middle;
  content: "";
}
/* 【SHC v1.0】保守対応 #14688 商品検索メニューのカテゴリ別リンクの表示デザイン変更 Start. */
.refinement-bar .card.refinement.refinement_fix {
  flex-direction: row;
  margin: 0;
  padding: 20px 30px 20px 30px;
  border: 0 none;
  background-color: transparent;
}
.refinement-foot .card-footer {
  margin-bottom: -25px;
  padding: 0;
  border: 0 none;
  background-color: transparent;
}
.refinement-foot .sx-category-link a {
  display: block;
  position: relative;
  padding: 10px 20px;
  background-color: #777;
  color: #fff !important;
  font-family: "TazuganeInfoStdN-Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", "Osaka", "Osaka\FF0D\7B49\5E45", "Osaka-Mono", sans-serif;
  font-size: 17px;
  font-weight: bold;
  white-space: nowrap;
  transition: 0.3s;
  border-radius: 3px;
}
.refinement-foot .sx-category-link a:before {
  appearance: none;
  display: inline-block;
  position: relative;
  top: -2px;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  padding: 0;
  border: 0;
  background: url("../images/global/icon_search_white.svg") no-repeat center;
  background-size: contain;
  vertical-align: middle;
  content: "";
}
/* 【SHC v1.0】保守対応 #14688 商品検索メニューのカテゴリ別リンクの表示デザイン変更 End. */

/* ----------------------------------------------------------------------------------

 一覧画面 ヒーローブロック

 ---------------------------------------------------------------------------------- */
.sx-hero-container {
  margin-bottom: 50px;
}

.sx-hero {
  margin: 0 15px;
  background: #fff;
}

.sx-hero-category {
  padding: 32px 0 32px 28px;
}
.sx-hero-category .sx-hero-main {
  margin-left: -28px;
}
.sx-hero-category .sx-hero-title {
  display: table;
}

.sx-hero-flex {
  display: flex;
  align-items: center;
}

.sx-hero-main {
  width: 400px;
  text-align: center;
}

.sx-hero-title {
  position: relative;
  margin: 0 auto;
  padding-bottom: 6px;
  font-family: "TazuganeInfoStdN-Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", "Osaka", "Osaka\FF0D\7B49\5E45", "Osaka-Mono", sans-serif;
  font-size: 29px;
  font-weight: bold;
  white-space: nowrap;
}
.sx-hero-title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #c90012;
  content: "";
}

.sx-hero-image img {
  max-width: 100%;
  height: auto;
}

.sx-hero-desc {
  margin-top: 26px;
  font-size: 15px;
  line-height: 27px;
  text-align: left;
}

/* ----------------------------------------------------------------------------------

 一覧画面 ヒーローブロック 成分

 ---------------------------------------------------------------------------------- */
.sx-hero-component {
  padding: 0;
}
.sx-hero-component .sx-hero-image {
  order: 0;
}
.sx-hero-component .sx-hero-main {
  order: 1;
  padding: 50px;
}
.sx-hero-component .sx-hero-title {
  padding-bottom: 20px;
}

/* ----------------------------------------------------------------------------------

 一覧画面 ヒーローブロック 読みもの

 ---------------------------------------------------------------------------------- */
.sx-hero-reading {
  padding: 0;
}
.sx-hero-reading .sx-hero-image {
  order: 0;
}
.sx-hero-reading .sx-hero-main {
  order: 1;
  width: 100%;
}
.sx-hero-reading .sx-hero-title {
  padding-bottom: 20px;
}

/* ----------------------------------------------------------------------------------

 一覧画面 読みもの タグ一覧

 ---------------------------------------------------------------------------------- */

.sx-article-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto 40px;
  padding: 0;
}
.sx-article-tag {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 14px;
}
.sx-article-tag a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 0 20px;
  border-radius: 22px;
  background-color: #8e867b;
  color: #fff !important;
  font-size: 14px;
  transition: 0.3s;
}

/* ----------------------------------------------------------------------------------

 一覧画面 コンテンツヘッダー

 ---------------------------------------------------------------------------------- */
.grid-header {
  margin-top: 40px;
  margin-bottom: 20px;
}
.grid-header .sx-grid-title {
  display: table;
  position: relative;
  font-size: 20px;
}
.grid-header .sx-grid-title:after {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #c90012;
  content: "";
}

.row + .grid-header {
  margin-top: 80px;
}

.sx-grid-header-noresult {
  margin-top: 30px;
}

/* ----------------------------------------------------------------------------------

 一覧画面 コンテンツフッター

 ---------------------------------------------------------------------------------- */
.grid-footer {
  padding: 20px 0 0;
}

.show-more {
  width: 190px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

/* ----------------------------------------------------------------------------------

 検索結果

 ---------------------------------------------------------------------------------- */
.sx-c-searchform {
  /* 検索ワード入力欄 */
}
.sx-c-searchform .search-field {
  border-color: #8e867b;
}

/* ----------------------------------------------------------------------------------

 検索結果なし

 ---------------------------------------------------------------------------------- */
.sx-no-result {
  margin: 30px 15px 0;
  padding: 26px 22px !important;
  background-color: #fff;
  font-size: 15px !important;
  line-height: 26px;
}
.sx-no-result p + p {
  margin-top: 26px;
}
.sx-no-result h5 {
  font-size: 15px !important;
}
.sx-no-result ul {
  margin-top: 26px;
  padding-left: 20px;
}
.sx-no-result .sx-c-searchform {
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.sx-no-result .sx-c-searchform .search-field {
  border-color: #8e867b;
  background-color: #f5f4f0;
}
.sx-no-result .search-keywords {
  display: block;
  font-family: "TazuganeInfoStdN-Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", "Osaka", "Osaka\FF0D\7B49\5E45", "Osaka-Mono", sans-serif;
}

/* 【SHC V1.0】保守対応#24161 第一類医薬品追加に伴う「薬剤師からの情報提供」の同意チェック機能作成  Start. */
.show-interviewSheet {
  display: block;
  padding: 30px;
  border-top: thin dashed;
}
/* 【SHC V1.0】保守対応#24161 第一類医薬品追加に伴う「薬剤師からの情報提供」の同意チェック機能作成  End. */

@media screen and (max-width: 768px) {
  .sx-search-page {
    display: flex;
    flex-direction: column;
  }
  .search-results {
    padding-bottom: 30px;
  }
  .sx-category-menu {
    order: 3;
  }
  .refinement-bar .card.refinement {
    display: block;
    padding: 10px 0 0;
  }
  .refinement-bar .card-header {
    margin-left: 20px;
    padding-right: 20px;
    font-size: 19px;
  }
  .refinement-bar .card-header:before {
    top: 4px;
  }
  .refinement-bar .card-header > h2 {
    position: relative;
    top: -2px;
    line-height: 1.3;
  }
  .refinement-bar .card-body {
    width: 100%;
    margin-top: 6px;
  }
  .refinement-bar .card-body .values {
    margin: 0 -20px 0 0;
  }
  .refinement-bar .card-footer {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 10px;
  }
  .refinement-bar .sx-category-link {
    margin-top: 2px;
  }
  .refinement-bar .sx-category-link a {
    text-align: center;
  }
  .sx-hero {
    margin-top: 24px;
    margin-bottom: 10px;
  }
  .sx-hero-reading {
    width: calc(100% - 30px);
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .sx-tags-container .container {
    padding-right: 0;
    padding-left: 0;
  }
  .sx-article-tags {
    margin: 10px auto 0;
  }
  /* 【SHC v1.0】保守対応 #14688 商品検索メニューのカテゴリ別リンクの表示デザイン変更 Start. */
  .refinement-foot .card-footer {
    right: auto;
    bottom: auto;
    margin-top: 10px;
  }
  .refinement-foot .sx-category-link {
    margin-top: 2px;
  }
  .refinement-foot .sx-category-link a {
    text-align: center;
  }
  /* 【SHC v1.0】保守対応 #14688 商品検索メニューのカテゴリ別リンクの表示デザイン変更 End. */
}
@media screen and (min-width: 769px) {
  .sx-search-container {
    margin-bottom: 40px;
  }
  .refinement-bar .card-header {
    font-feature-settings: "palt" 1;
  }
  .refinement-bar .card-body .values button:hover {
    background-color: #c90012;
    color: #fff;
    font-weight: bold;
  }
  .refinement-bar .card-footer {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .refinement-bar .sx-category-link {
    margin-left: 1px;
  }
  .refinement-bar .sx-category-link a:hover {
    background-color: #555;
  }
  .sx-hero-reading .sx-hero-main {
    padding: 40px 27px 30px;
  }
  .sx-hero-reading .sx-hero-desc {
    text-align: center;
  }
  .sx-article-tag a:hover {
    background-color: #c90012;
    text-decoration: none;
  }
  .grid-header .sx-grid-title {
    margin-bottom: 0;
    font-size: 24px;
  }
  .grid-header .sx-grid-title:after {
    bottom: -4px;
  }
  .grid-header {
    margin-bottom: 50px;
  }
  .row + .grid-header {
    margin-top: 100px;
  }
  .sx-grid-header-noresult {
    margin-top: 30px;
  }
  .grid-footer {
    padding: 15px 0 0;
  }
  /* 【SHC v1.0】保守対応 #14688 商品検索メニューのカテゴリ別リンクの表示デザイン変更 Start. */
  .refinement-foot .card-footer {
    display: flex;
    right: 0;
    bottom: 0;
  }
  .refinement-foot .sx-category-link {
    margin-left: 1px;
  }
  .refinement-foot .sx-category-link a:hover {
    background-color: #555;
  }
  /* 【SHC v1.0】保守対応 #14688 商品検索メニューのカテゴリ別リンクの表示デザイン変更 End. */
}
@media screen and (min-width: 544px) and (max-width: 768px) {
  .sx-category-menu {
    margin-bottom: 80px;
  }
}
@media screen and (max-width: 543px) {
  .refinement-bar {
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
  }
  .sx-hero-container {
    padding: 0;
  }
  .sx-hero-container .row {
    margin-right: auto;
    margin-left: auto;
  }
  .sx-hero-container .col-12 {
    padding-right: 0;
    padding-left: 0;
  }
  .sx-hero {
    margin-right: 0;
    margin-left: 0;
  }
  .sx-hero-main {
    margin-bottom: 24px;
  }
  .sx-hero-title {
    font-size: 23px;
  }
  .grid-header .custom-select {
    margin-top: 20px;
  }
}
@media screen and (max-width: 991px) {
  .sx-hero-container {
    margin-bottom: 10px;
  }
  .sx-hero-category {
    padding: 34px;
  }
  .sx-hero-category .sx-hero-main {
    margin-left: auto;
  }
  .sx-hero-flex {
    display: block;
  }
  .sx-hero-main {
    width: 100%;
    margin-bottom: 36px;
  }
  .sx-hero-desc {
    margin-top: 8px;
  }
  .sx-hero-component .sx-hero-main {
    margin-bottom: 0;
    padding: 34px 27px 20px;
  }
  .sx-hero-component .sx-hero-title {
    padding-bottom: 16px;
    font-size: 23px;
  }
  .sx-hero-reading .sx-hero-main {
    margin-bottom: 0;
    padding: 34px 20px 20px;
  }
  .sx-hero-reading .sx-hero-title {
    padding-bottom: 16px;
    font-size: 23px;
  }
}
@media screen and (min-width: 992px) {
  .sx-hero-image {
    width: calc(100% - 400px);
  }
}
@media screen and (min-width: 544px) {
  .sx-article-tag a {
    font-size: 15px;
  }
  .sx-article-tag {
    min-width: 138px;
    margin-right: 14px;
  }
  .sx-article-tag a {
    width: 100%;
    height: 44px;
    border-radius: 22px;
    background-color: #8e867b;
    color: #fff !important;
  }
  .sx-c-searchform .search-field {
    font-size: 19px;
  }
  .sx-c-searchform .sx-search-button {
    font-size: 19px;
  }
  .sx-no-result {
    margin: 60px 15px 0;
    padding: 60px !important;
    font-size: 17px !important;
  }
  .sx-no-result p + p {
    margin-top: 26px;
  }
  .sx-no-result h5 {
    font-size: 17px !important;
  }
  .sx-no-result ul {
    margin-top: 26px;
    padding-left: 20px;
  }
  .sx-no-result .sx-c-searchform {
    max-width: 620px;
  }
}

/**　【SHC v1.0】 くすりに詳細情報の文言を設定する対応　*/
.tx-medicine {
  font-size: 20px;
}

@media screen and (min-width: 769px) {
  .tx-medicine {
    font-size: 24px;
  }
}

/* 【SHC V1.0】保守対応#24161 第一類医薬品追加に伴う「薬剤師からの情報提供」の同意チェック機能作成  Start. */
.sx-interviewSheet {
  margin-top: 5px;
  padding: 30px 10px 30px;
  background-color: #fff;
}
.sx-interview-title {
  color: #c90012;
  font-weight: bold;
  font-size: 24px;
  line-height: 36px;
  margin: 0 0 20px;
  padding: 0;
  text-align: center;
}

.interview_open {
  font-size: 20px;
  line-height: 20px;
  display: flex;
  justify-content: center;
  text-decoration: underline;
  margin: 15px;
}
.interview_open:hover {
  cursor: pointer;
}
.interview_open i, .interview_open i:after {
  border-right: 10px solid transparent;
  border-bottom: 17.3205px solid #c90012;
  border-left: 10px solid transparent;
  transform: rotate(180deg);
  transition: all 0.6s ease;
  height: 100%;
}
.interview_open .comment {
  margin-bottom: 0;
  margin-left: 10px;
}
.interview_open .comment:after {
  content: '回答する';
}
.interview_open.is-active .comment:after {
  content: '閉じる';
}
.interview_open.is-active i {
  transform: rotate(0deg);
  transition: all 0.6s ease;
}
@media screen and (min-width: 769px) {
  .sx-interviewSheet {
    margin-top: 10px;
    padding: 50px 90px 50px;
  }
}
.interviewSheet-main {
	display: none;
}
.interviewSheet-main input[type="checkbox"] {
  top: 2px;
  left: 0;
  width: 21px;
  height: 21px;
  border: 1px solid #000 !important;
  background: transparent !important;
}
input .answered {
  width: 250px;
  height: 50px;
  border-radius: 6px;
  font-size: 20px;
  font-family: "TazuganeInfoStdN-Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", "Osaka", "Osaka\FF0D\7B49\5E45", "Osaka-Mono", sans-serif !important;
}
.interviewSheet .answered_right {
  text-align: end;
}
/* 【SHC V1.0】保守対応#24161 第一類医薬品追加に伴う「薬剤師からの情報提供」の同意チェック機能作成  End. */

/* 【SHC v1.0】保守対応#24750 スピーカー販売開始に伴う制御追加  Start. */
.comment_button1 {
  color: #c90012;
  text-align: center;
  font-size: 15px;
}
.comment_button2 {
	margin-top: 20px;
	text-align: center;
	font-size: 15px;
	color: #c90012;
}
.comment_button2 a {
  color: #c90012 !important;
  text-decoration: underline;
  transition: opacity 0.3s;
}
.comment_button2 a:hover {
  opacity: 0.7;
}
/* 【SHC v1.0】保守対応#24750 スピーカー販売開始に伴う制御追加  End. */