@charset "utf-8";

/* =========================================================
   サツマ薬局オンラインショップ
   商品一覧 PC専用 v4

   ファイル:
   satuma_pc_catalog.css

   v4変更:
   ・現在ページが <strong>数字</strong> で出力されることを実DOM確認
   ・現在ページにも他ページリンクと同じ30×30pxの占有領域を付与
   ・ページ番号間の見た目の間隔を均等化
   ・現在ページの背景色等は変更しない

   v3から維持:
   ・ページ送りを inline-flex 化
   ・ページ番号間を gap:6px で統一
   ・「キーワード検索」の表示を
     「このカテゴリの商品を絞り込む」に変更
   ・商品件数の鮮赤をエンジ系へ整理
   ・絞り込み～件数～ページナビ間の余白を調整
   ・ベージュ＋エンジのトンマナ
   ・旧左カラム廃止後の商品一覧を1カラム化
   ・商品一覧最大幅1200px
   ・スマレジ標準4列構造
   ・検索フォーム
   ・検索条件
   ・価格帯
   ・ページ送り
   ・並び替え
   ・表示件数変更
   ・表示形式変更
   ・商品フォーム
   ・JavaScript不使用

   変更しないもの:
   ・商品URL
   ・商品ID
   ・画像URL
   ・価格
   ・在庫、会員限定等の表示
   ・form action / name / hidden
   ・スマレジ標準検索処理
   ・スマレジ標準並び替え処理
   ・商品詳細ページ
   ・MYページ
   ・TOPページ
   ・SP版
========================================================= */


/* =========================================================
   商品一覧ページ全体
========================================================= */

body.plg_Raku2_LC_Page_Products_List #container {
  width: calc(100% - 40px) !important;
  max-width: 1200px !important;
  min-width: 940px !important;
  margin: 20px auto 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List #main_column.colnum1 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.plg_Raku2_LC_Page_Products_List #undercolumn {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   ページタイトル
========================================================= */

body.plg_Raku2_LC_Page_Products_List #main_column > h2.title {
  width: 100% !important;
  margin: 24px 0 18px !important;
  padding: 0 0 13px !important;
  color: #2c221d !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #d8cbc1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   商品検索フォーム全体
========================================================= */

body.plg_Raku2_LC_Page_Products_List #search_form {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   キーワード／絞り込み領域
========================================================= */

body.plg_Raku2_LC_Page_Products_List #search_keyword_area {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fffdfa !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   絞り込み開閉見出し
========================================================= */

body.plg_Raku2_LC_Page_Products_List #initial_display_toggle {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 16px !important;
  color: #711b1b !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  background: #f3e7dc !important;
  border: 0 !important;
  border-bottom: 1px solid #dfd0c2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

body.plg_Raku2_LC_Page_Products_List #initial_display_toggle::before {
  color: #8b1e1e !important;
}

body.plg_Raku2_LC_Page_Products_List #initial_display_toggle:hover {
  background: #f8eee6 !important;
}

body.plg_Raku2_LC_Page_Products_List
#initial_display_toggle > span {
  font-size: 0 !important;
}

body.plg_Raku2_LC_Page_Products_List
#initial_display_toggle > span::after {
  content: "このカテゴリの商品を絞り込む";
  display: inline;
  color: #711b1b;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}


/* =========================================================
   開閉コンテンツ
========================================================= */

body.plg_Raku2_LC_Page_Products_List
#search_keyword_area > .initial_display {
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 16px 11px !important;
  background: #fffdfa !important;
  border: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   キーワード入力上段
========================================================= */

body.plg_Raku2_LC_Page_Products_List #search_keyword_top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px 180px !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List #search_kw {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  color: #302722 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  background: #ffffff !important;
  border: 1px solid #aaa098 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_keyword_top select {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: #302722 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  border: 1px solid #aaa098 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List #btn_kwd_search {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 7px 20px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  background: #8b1e1e !important;
  background-image: none !important;
  border: 1px solid #8b1e1e !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List #btn_kwd_search:hover,
body.plg_Raku2_LC_Page_Products_List #btn_kwd_search:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #b5141d !important;
  background-image: none !important;
  border-color: #b5141d !important;
}


/* =========================================================
   検索条件下段
========================================================= */

body.plg_Raku2_LC_Page_Products_List #search_keyword_bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  gap: 8px 22px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_keyword_bottom p {
  margin: 0 !important;
  padding: 0 !important;
  color: #493e38 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_no_only {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  align-items: center !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_no_only label {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 3px !important;
  color: #493e38 !important;
  font-size: 14px !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_keyword_bottom input[type="radio"] {
  margin: 0 !important;
  accent-color: #8b1e1e !important;
}

body.plg_Raku2_LC_Page_Products_List #search_deselect_kw {
  width: 280px !important;
  max-width: 100% !important;
  height: 34px !important;
  margin: 0 5px !important;
  padding: 5px 9px !important;
  color: #302722 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  border: 1px solid #b8afa8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}


/* =========================================================
   価格帯
========================================================= */

body.plg_Raku2_LC_Page_Products_List #search_price_area {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  align-items: center !important;
  gap: 6px !important;
  color: #493e38 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: #f8f5f1 !important;
  border: 0 !important;
  border-top: 1px solid #e8e0d8 !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_price_area input[type="text"] {
  width: 105px !important;
  height: 34px !important;
  margin: 0 2px !important;
  padding: 5px 8px !important;
  color: #302722 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  border: 1px solid #b8afa8 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_price_area input[type="submit"],
body.plg_Raku2_LC_Page_Products_List
#search_price_area input[type="button"] {
  min-width: 100px !important;
  height: 34px !important;
  margin: 0 0 0 10px !important;
  padding: 5px 15px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: #8b1e1e !important;
  background-image: none !important;
  border: 1px solid #8b1e1e !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.plg_Raku2_LC_Page_Products_List
#search_price_area input[type="submit"]:hover,
body.plg_Raku2_LC_Page_Products_List
#search_price_area input[type="button"]:hover {
  background: #b5141d !important;
  border-color: #b5141d !important;
}


/* =========================================================
   その他の検索条件
========================================================= */

body.plg_Raku2_LC_Page_Products_List #refine_area {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* =========================================================
   商品件数
========================================================= */

body.plg_Raku2_LC_Page_Products_List
.plg_raku2_product_count {
  width: 100% !important;
  margin: 18px 0 7px !important;
  padding: 0 !important;
  color: #493e38 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
.plg_raku2_product_count .attention,

body.plg_Raku2_LC_Page_Products_List
.plg_raku2_product_count strong {
  color: #8b1e1e !important;
  font-weight: 700 !important;
}


/* =========================================================
   上下ページナビ共通
========================================================= */

body.plg_Raku2_LC_Page_Products_List #page_navi_top,
body.plg_Raku2_LC_Page_Products_List #page_navi_bottom {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.plg_Raku2_LC_Page_Products_List
#page_navi_top .pagenumber_area,
body.plg_Raku2_LC_Page_Products_List
#page_navi_bottom .pagenumber_area {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 5px 0 7px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 20px !important;
  box-sizing: border-box !important;
}


/* =========================================================
   並び替え
========================================================= */

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .change {
  order: 2 !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  color: #493e38 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .change strong {
  color: #8b1e1e !important;
  font-weight: 700 !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .change a {
  color: #493e38 !important;
  -webkit-text-fill-color: #493e38 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .change a:hover,
body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .change a:focus {
  color: #b5141d !important;
  -webkit-text-fill-color: #b5141d !important;
  text-decoration: underline !important;
}


/* =========================================================
   表示件数
========================================================= */

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area select[name="disp_number"] {
  height: 34px !important;
  margin: 0 3px !important;
  padding: 4px 7px !important;
  color: #302722 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  border: 1px solid #aaa098 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   表示形式切替
========================================================= */

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .view_change {
  display: inline-flex !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 3px !important;
  vertical-align: middle !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .view_change a {
  display: inline-flex !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  color: #40352f !important;
  -webkit-text-fill-color: #40352f !important;
  text-decoration: none !important;
  background: #f5f1ec !important;
  border: 0 !important;
  border-radius: 2px !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .view_change a:hover,
body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .view_change a:focus {
  color: #8b1e1e !important;
  -webkit-text-fill-color: #8b1e1e !important;
  background: #f4e9df !important;
}


/* =========================================================
   ページ送り
   v4:
   現在ページ <strong> にも30×30pxを確保
========================================================= */

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .navi {
  order: 1 !important;
  float: none !important;
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  color: #493e38 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  white-space: nowrap !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .navi a {
  display: inline-flex !important;
  min-width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #493e38 !important;
  -webkit-text-fill-color: #493e38 !important;
  line-height: 22px !important;
  text-align: center !important;
  text-decoration: none !important;
  background: #f5f1ec !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .navi > strong {
  display: inline-flex !important;
  min-width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #493e38 !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .navi a:hover,
body.plg_Raku2_LC_Page_Products_List
.pagenumber_area .navi a:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #8b1e1e !important;
}


/* =========================================================
   商品一覧
========================================================= */

body.plg_Raku2_LC_Page_Products_List
#undercolumn > form[name^="product_"] {
  vertical-align: top !important;
  margin-bottom: 22px !important;
}

body.plg_Raku2_LC_Page_Products_List
form[name^="product_"] .list_area {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_List
form[name^="product_"] .listphoto img {
  max-width: 100% !important;
  height: auto !important;
}


/* =========================================================
   フォーカス
========================================================= */

body.plg_Raku2_LC_Page_Products_List
#search_form input:focus-visible,

body.plg_Raku2_LC_Page_Products_List
#search_form select:focus-visible,

body.plg_Raku2_LC_Page_Products_List
#page_navi_top a:focus-visible,

body.plg_Raku2_LC_Page_Products_List
#page_navi_bottom a:focus-visible {
  outline: 2px solid rgba(139, 30, 30, 0.28) !important;
  outline-offset: 2px !important;
}


/* =========================================================
   狭いPCウィンドウ
========================================================= */

@media screen and (max-width: 1100px) {

  body.plg_Raku2_LC_Page_Products_List #container {
    width: calc(100% - 24px) !important;
    min-width: 956px !important;
  }

  body.plg_Raku2_LC_Page_Products_List #search_keyword_top {
    grid-template-columns: minmax(0, 1fr) 135px 155px !important;
  }

  body.plg_Raku2_LC_Page_Products_List
  .pagenumber_area .change {
    font-size: 13px !important;
  }
}